Accordion - Automatically hide unselected sections

JavaScript
1

Hello everyone,

how can I change the code in the link below to make sure that when opening a Section the other opened ones close automatically?

Accordion with symbols

Thanks

2

I would make use of BootStrap. Follow this: BootStrap Collapse

Here is a snippet of code I have used before:

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        Option 1</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Description 1</div>
                <div class="images">
                    <p>Whatever you want...</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        Option 2</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">Description 2</div>
                <div class="images">
                   <p> Whatever you want...</p>
</div>

Hope this helps.

3

Thanks for the suggestion but I’d prefer not to use Bootstrap if possible

4

Then, refine this code:

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    //.classList.toggle("active");
    for (let ele of acc) {
    	if (ele.nextElementSibling.style.maxHeight) {
        	console.log(ele)
        	ele.nextElementSibling.style.maxHeight = null;
        }
    }
    this.classList.toggle("active");
    console.log(this)
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

I rushed it. So, you can neaten it a lot.