preppietrash
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by preppietrash
-
-
when image is opened inside the accordion the gallery is in closes immediately, and it has to be reopened to look at next image.
<div class="accordion"> <button class="section">People</button> <div class="panel"> <!-- content goes below --> <!-- Group 1 --> <div class="w3-row"> <div class="w3-third"> <!-- Column 1--> <!-- Tile 1 --> <img src="https://source.unsplash.com/user/c_v_r/1900x800" style="width:100%" onclick="onClick(this)" alt="editorial"> <!-- Tile 2 --> <img src="https://source.unsplash.com/user/c_v_r/1900x800" style="width:100%" onclick="onClick(this)" alt="editorial"> <!-- Tile 3 --> <img src="https://source.unsplash.com/user/c_v_r/1900x800" style="width:100%" onclick="onClick(this)" alt="editorial"> </div>
starting with some of w3schools CSS templates I made a simple image gallery grid, with modal.
now I have added that image gallery to an accordion; I have it set to one tab open at a time to keep clutter down, I achieved this with JS
now the image grid is inside the accordion
modal still makes them pop up and provides the close button as expected;
the problem is
when image is opened the accordion it came from closes immediately, and it has to be reopened to look at next image.
I created a fiddle here
My original Stack question here
thank you for any advice or direction on how to fix
console.log("working accordion test env 7"); var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } // Set up the click event on the accordion itself // When a panel is clicked, that event will bubble up // to the accordion and can be handled there. document .querySelector(".accordion") .addEventListener("click", function(event) { // Check to see if the clicked panel was the currently open one. let alreadyActive = event.target.classList.contains("active"); // Loop over all the panels an close each one document.querySelectorAll(".panel").forEach(function(panel) { panel.style.maxHeight = "0"; panel.previousElementSibling.classList.remove("active"); }); // If the clicked panel wasn't the already active one go ahead // and open the clicked panel. Otherwise, do nothing and leave // all the panels closed. if (!alreadyActive) { // Then show the clicked panel which is accessible as event.target event.target.classList.add("active"); var panel = event.target.nextElementSibling; panel.style.maxHeight = panel.scrollHeight + "px"; } }); // Modal Image Gallery function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; var captionText = document.getElementById("caption"); captionText.innerHTML = element.alt; }
form other readings, questions and replies I have received:I have gathered that the event listener is bubbling and interpreting all clicks inside the accordion; and it causes the accordion to collapse back.how would I modify the existing script to only target the accordion?update:
changing ".accordion" to ".section" stops the underlying accordion from closing; however stops the "one at a time" feature
console.log("working accordion test env 7"); var acc = document.getElementsByClassName("section"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } // Set up the click event on the accordion itself // When a panel is clicked, that event will bubble up // to the accordion and can be handled there. document.querySelector(".section").addEventListener("click", function (event) { // Check to see if the clicked panel was the currently open one. let alreadyActive = event.target.classList.contains("active"); // Loop over all the panels an close each one document.querySelectorAll(".section").forEach(function (panel) { panel.style.maxHeight = "0"; panel.previousElementSibling.classList.remove("active"); }); // If the clicked panel wasn't the already active one go ahead // and open the clicked panel. Otherwise, do nothing and leave // all the panels closed. if (!alreadyActive) { // Then show the clicked panel which is accessible as event.target event.target.classList.add("active"); var panel = event.target.nextElementSibling; panel.style.maxHeight = panel.scrollHeight + "px"; } });
modal gallery inside accordion closes accordion
in JavaScript
Posted
every combination of .section .panel .accordion on getElementsByClassName / querySelectorAll / querySelector / give varied results but not the desired one.