Question

65

How to close accordion panels when another one opens?

rated 0 times [ 66] [ 1] / answers: 1 / hits: 15945 / 5 Years ago, tue, march 26, 2019, 12:00:00

I have accordion widget on my static HTML/CSS/JS site.

By default all accordions are closed.

User can open any of them and those will stay opened until the user manually closes them by clicking on the accordion title.

How can I make previously opened accordions to close when users click to open another one?

I created my accordion using this template: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

I put both HTML and JS in the HTML file:

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;

}

});

}

.accordion {

  color: #fff;

  background-color: #00000042;

  cursor: pointer;

  padding: 10px 10px;

  margin-top:20px;

  width: 100%;

  border: 1px solid #00000042;

  text-align: left;

  outline: none;

  transition: 0.4s;

}



.active, .accordion:hover {

  background-color: #00000042;

  border: 1px solid #fc8e2d;

}



.panel {

  padding: 0 18px;

  font-size: 18px;

  background-color: #00000042;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

}

<button class=accordion><span class=faq__question-heading>Title1</span></button>

<div class=panel>

  <p style=padding:18px 0;>description1</p>

</div>



<button class=accordion><span class=faq__question-heading>Title2</span></button>

<div class=panel>

  <p style=padding:18px 0;>description2</p>

</div>



<button class=accordion><span class=faq__question-heading>Title3</span></button>

<div class=panel>

  <p style=padding:18px 0;>description3</p>

</div>



<script>



</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davion

Add To Favorites

Follow

Total Points: 458

Total Questions: 109

Total Answers: 100

Location: Taiwan

Member since Mon, Sep 6, 2021

3 Years ago

davion questions

1 'rollup' is not recognized as an internal or external command

Fri, Oct 1, 21, 00:00, 3 Years ago

1 How to add your own custom css to override react-confirm-alert defaults

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Module build failed Cannot find module '@babel/preset-env'

Tue, May 19, 20, 00:00, 4 Years ago

1 React Material UI CardHeader title overflow with dots

Fri, May 8, 20, 00:00, 4 Years ago

1 How to use createStackNavigator in React Native?

Mon, May 4, 20, 00:00, 4 Years ago

View All

answered 5 Years ago hallie · Accepted Answer

There are already some answers given while I finished the code ;). However I will do the contribution anyway. Every time an accordion is opened you have to execute some extra code. You have to get the element which has the class .active - in your case we are going with .accordion.active. After that it is necessary remove the .active class from the found element. Finally you have to update the max-height of the following panel. You can do this with nextElementSilbling. Here is the updated JS code:

  let active = document.querySelectorAll(.accordion-div .accordion.active);

  for(let j = 0; j < active.length; j++){

    active[j].classList.remove(active);

    active[j].nextElementSibling.style.maxHeight = null; //or 0px

  }

Additionally I updated the HTML to better encapsulate the component. I wrapped a <div> around everything to better apply a selector for retrieving the element. Hope this helps. I copied your answer and updated it to generate a working example. If you want to use multiple accordions per page I would recommend to work with id= to retrieve the correct one. Otherwise all accordions would get closed which shouldn't happen intentionally.

var acc = document.getElementsByClassName(accordion);

var i;



for (i = 0; i < acc.length; i++) {

acc[i].addEventListener(click, function() {



var panel = this.nextElementSibling;

if (panel.style.maxHeight){

  panel.style.maxHeight = null;

} else {

  let active = document.querySelectorAll(.accordion-div .accordion.active);

  for(let j = 0; j < active.length; j++){

    active[j].classList.remove(active);

    active[j].nextElementSibling.style.maxHeight = null;

  }

  this.classList.toggle(active);

  panel.style.maxHeight = panel.scrollHeight + px;

}

});

}

.accordion {

  color: #fff;

  background-color: #00000042;

  cursor: pointer;

  padding: 10px 10px;

  margin-top:20px;

  width: 100%;

  border: 1px solid #00000042;

  text-align: left;

  outline: none;

  transition: 0.4s;

}



.active, .accordion:hover {

  background-color: #00000042;

  border: 1px solid #fc8e2d;

}



.panel {

  padding: 0 18px;

  font-size: 18px;

  background-color: #00000042;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

}

<div class=accordion-div>

  <button class=accordion><span class=faq__question-heading>Title1</span></button>

  <div class=panel>

    <p style=padding:18px 0;>description1</p>

  </div>



  <button class=accordion><span class=faq__question-heading>Title2</span></button>

  <div class=panel>

    <p style=padding:18px 0;>description2</p>

  </div>



  <button class=accordion><span class=faq__question-heading>Title3</span></button>

  <div class=panel>

    <p style=padding:18px 0;>description3</p>

  </div>

</div>