手风琴的条件打开和关闭功能

Question

I implemented a simple accordion menu for my mobile view with clickable images as menu headers.

I would like to have only one category open at a time, basically, a click on picture 2 should open the picture 2 accordion content body, but close all the other accordion content bodies. Right now I would need to click on the each picture again to close its body.

Hope that makes sense.

This is my code thus far:

 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.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } 

 .accordion { background-color: #fff; color: #444; cursor: pointer; width: 103%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: -5px; } .bg { width: 100%; } .active, .accordion:hover { background-color: #fff; } .panel { padding: 0 0px; display: none; width: 100%; background-color: white; overflow: hidden; } 

 <button class="accordion"><div class="bolimg"> <img class="bg" src="/files/0.jpg"> </div></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/1.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/2.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/3.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/4.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/5.jpg"></button> <div class="panel"> <p>Content body text</p> </div> 

Answer 1

This is a little script i can come up with.

I added the next css class to control the state of the accordion and to avoid doing the css with js:

.accordion.active+div {
  display: block
}

The script validate two things

1. If there is one open al ready
2. If the one clicked is the same as the one that is opened

I hope this help, if you need anything else i'll be around

 var acc = document.getElementsByClassName("accordion"); var i; var open = null; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { if (open == this) { open.classList.toggle("active"); open = null; } else { if (open != null) { open.classList.toggle("active"); } this.classList.toggle("active"); open = this; } }); } 

 .accordion { background-color: #fff; color: #444; cursor: pointer; width: 103%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: -5px; } .bg { width: 100%; } .active, .accordion:hover { background-color: #fff; } .panel { padding: 0 0px; display: none; width: 100%; background-color: white; overflow: hidden; } .accordion.active+div { display: block } 

 <button class="accordion"><div class="bolimg"> <img class="bg" src="/files/0.jpg"> </div></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/1.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/2.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/3.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/4.jpg"></button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion"><img class="bg" src="/files/5.jpg"></button> <div class="panel"> <p>Content body text</p> </div> 

Answer 2

If you are using jQuery library, try to make use of

• removeClass()
• addClass()
• siblings()
• next()

_{Note: I have removed the images from your code and places just numbers for visuals}

Stack Snippet

 $(".accordion").on("click", function() { $(".panel").removeClass("show"); $(this).addClass("active").siblings(".accordion").removeClass("active") $(this).next(".panel").addClass("show"); }); 

 .accordion { background-color: #fff; color: #444; cursor: pointer; width: 103%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: -5px; } .bg { width: 100%; } .active, .accordion:hover { background-color: #000; color: #fff; } .panel.show { display: block } .panel { padding: 0 0px; display: none; width: 100%; background-color: white; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="accordion">1</button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion">2</button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion">3</button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion">4</button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion">5</button> <div class="panel"> <p>Content body text</p> </div> <button class="accordion">6</button> <div class="panel"> <p>Content body text</p> </div>