折叠手风琴菜单

Question

I have this simple collapsible menu on www.keokuk.com I would like for the previous menu to close when you click on the next one.

this is the 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>

Answer 1

I worked on a solution on your website.

But it appears you set max-height manually in an other javascript function so you can just do the same thing in the commented line.

document.querySelectorAll('.collapsible').forEach(el => {
    el.addEventListener('click', (e) => {
        document.querySelectorAll('.collapsible').forEach(el => { 
            el.classList.remove('active');
            el.nextSibling.nextElementSibling.style.maxHeight = 0; }
        );

        e.target.classList.add('active');
        // Here you just have to reapply max-height to the active 
        // el.nextSibling.nextElementSibling.style.maxHeight = "...px"; 

        console.log(e.target.nextSibling.nextElementSibling);
    })
});

Answer 2

Details are commented in example

 // 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 &amp; 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>