How can I create an accordion panel that can be toggled using

Question

How can I create an accordion panel that can be toggled using

I've been working on creating an accordion panel using CSS with a touch of JavaScript.

Everything seems to be functioning correctly except for the toggling of the panels.

Essentially, when one panel is clicked, I want all other open panels to close.

Check out this fiddle:

I attempted to achieve this by keeping all panels closed all the time with the following code:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        $('.panel').addClass('hide');
        this.nextElementSibling.classList.toggle("hide");
        this.nextElementSibling.classList.toggle("show");
  }
}

and in the CSS section:

.panel.hide {
    opacity: 0;
    height: 0;  
}

I also tried:

$(this).removeClass('hide');

I understand that jQuery was used and not pure JavaScript but it didn't seem to work as expected. Any advice on how to fix this issue would be greatly appreciated.

Thank you in advance.

javascript css

Answer 1

Answer №1

Retrieve the active item in the click handler - if it is not the current item, remove the active state from it.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Utilizing jQuery for the same functionality:

$('.accordion').click(function() {
  var $this = $(this).toggleClass('active');
  var $panel = $this.next().toggleClass('show');
  $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
});

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 2

Retrieve the active item in the click handler - if it is not the current item, remove the active state from it.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    }
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Utilizing jQuery for the same functionality:

$('.accordion').click(function() {
  var $this = $(this).toggleClass('active');
  var $panel = $this.next().toggleClass('show');
  $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
});

button.accordion {
  background-color: #CBF1F5;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #3CF;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.accordion.active,
button.accordion:hover {
  background-color: #E1F7FB;
}
button.accordion:after {
  content: '\25bc';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: "\25b2";
  color: #FFF;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.panel.show {
  opacity: 1;
  max-height: 500px;
}
.panel.hide {
  opacity: 0;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Section 1</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<button class="accordion">Section 2</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 3

Answer №2

Try using the .not selector instead of a for loop in jQuery

JavaScript:

var acc = $(".accordion"); //using jQuery accordion

acc.click(function() //event listener for click on element
{ 
    $(this).toggleClass("active");  //toggle active class
    $('.panel').not($(this).next()).hide(); //hide all panels except the next one
    $(this).next().toggle(); //toggle visibility of next element
});

Answer 4

Try using the .not selector instead of a for loop in jQuery

JavaScript:

var acc = $(".accordion"); //using jQuery accordion

acc.click(function() //event listener for click on element
{ 
    $(this).toggleClass("active");  //toggle active class
    $('.panel').not($(this).next()).hide(); //hide all panels except the next one
    $(this).next().toggle(); //toggle visibility of next element
});

How can I create an accordion panel that can be toggled using

Answer №1

Answer №2

Similar questions

Array in JavaScript containing a replica set of Node.js and MongoDB

Bootstrap 4 row featuring bottom-aligned buttons on both the left and right sides of the container

The `$scope variable fails to update in another controller`

Issue with Vue.js: Textarea not functioning properly within a v-for loop

Struggling to retrieve JSON response through Javascript

Retrieve Files with Angular Framework

Image of outer space enclosed by a circular boundary

What could be causing the SyntaxError with JavascriptExecutor: Unexpected identifier?

"Phraseapp is in the process of refreshing the primary language document

Calculating the width of fluctuating DOM elements in AngularJS

How can NodeJS functions leverage parameters such as req, res, and result?

Using Node.JS to retrieve values of form fields

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

Application becomes unresponsive following database write caused by an infinite loop

Troubleshooting: jQuery script encountering issues with loading Bodymovin JSON files

Tips for linking my TypeScript document to the server

Angular $mdDialog allowing for multiple instances to be created

Initiate keyframe animation after completion of the transition (CSS)

Issue with Jquery Slider Showing Empty Slide