Openness default the first tab accordion

Question

I have an accordion that works really well, it looks good on the site and works as it should. However, I'm trying to add some more JavaScript functionality to it, to make it more it look more professional.

i want to make first accordion tab open by using JavaScript. thanks in advance.

HTML Code

<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
    <p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
    <p class="text-light">Text 2</p>
</div>

JS Code

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");
  }
}

Answer 1

I think Jquery UI's accordion has the first tab open by default and never allows you to have all tabs closed at once.

Check your .js file to see if it's being overridden by active: false. If active: false is there either delete it or change it to active: 0; (0 is first tab (zero based indexing))

Active: false will require the setting collapsible: true, which allows for closing a tab by clicking it so you may also see that in there.