Accordion conditional open and close function

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

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>

Answer 2

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>