Tengo este sencillo menú desplegable en www.keokuk.com . Me gustaría que el menú anterior se cerrara al hacer clic en el siguiente.
este es el javascript:
<script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } </script>Trabajé en una solución en su sitio web.
Pero parece que configuró la altura máxima manualmente en otra función de JavaScript para que pueda hacer lo mismo en la línea comentada.
document.querySelectorAll('.collapsible').forEach(el => { el.addEventListener('click', (e) => { document.querySelectorAll('.collapsible').forEach(el => { el.classList.remove('active'); el.nextSibling.nextElementSibling.style.maxHeight = "0px"; } ); e.target.classList.toggle('active'); // Here you just have to reapply your calculated max-height to the active (default 200px to test) el.nextSibling.nextElementSibling.style.maxHeight = "200px"; console.log(e.target.nextSibling.nextElementSibling); }) });Los detalles se comentan en el ejemplo.
// Collect all .switch into an array const switches = [...document.querySelectorAll(".switch")]; // Bind each .switch to the click event switches.forEach(s => s.addEventListener("click", openClose)); // Event handler passes Event Object as default function openClose(event) { // Reference the tag proceeding clicked tag const content = this.nextElementSibling; // Get the height of content let maxHt = content.scrollHeight + 'px'; // Find the index position of clicked tag let index = switches.indexOf(this); // The clicked tag will toggle .active class this.classList.toggle('active'); // Remove .active class from all .switch switches.forEach((btn, idx) => { /* If current index does NOT equal index of clicked tag... ...remove .active */ if (idx != index) { btn.classList.remove('active'); } }); /* If clicked has .active class... ...set style property of max-height using CSS variables */ if (this.classList.contains('active')) { content.style.setProperty('--maxH', maxHt + 'px'); } else { content.style.setProperty('--maxH', '0px'); } } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box } :root { font: 300 1.5ch/1.2 'Segoe UI'; --maxH: 0px; } body { width: 100%; min-height: 200%; padding: 15px; } header { width: max-content; margin: 10px 0 0; padding: 5px 10px; border: 3px ridge black; border-radius: 4px; background: #aaa; cursor: pointer; } section { position: relative; max-height: var(--maxH); margin: 0; padding: 5px 10px; border: 3px ridge black; border-radius: 4px; background: #ddd; opacity: 0; } .active+section { z-index: 1; opacity: 1.0; } <header class='switch'>Read more...</header> <section> <p>Merchandise Morty, your only purpose in life is to buy & consume merchandise and you did it, you went into a store an actual honest to god store and you bought something, you didn't ask questions or raise ethical complaints you just looked into the bleeding jaws of capitalism and said 'yes daddy please' and I'm so proud of you, I only wish you could have bought more, I love buying things so much Morty. Morty, you know outer space is up right? Are you kidding? I'm hoping I can get to both of them, Rick! And there's no evidence that a Latino student did it.</p> </section> <header class='switch'>Read more...</header> <section> <p>Oh, I'm sorry Morty, are you the scientist or are you the kid who wanted to get laid? Why don't you ask the smartest people in the universe, Jerry? Oh yeah you can't. They blew up. Looossseeerrrrr. I am not putting my father in a home! He just came back into my life, and you want to, grab him and, stuff him under a mattress like last month's Victoria's Secret?! </p> </section>