How can only allow 1 accordion to open up at a time?

Question

I have 4 accordions <-- click here to see

• Right now all of them will open up when I click on " View Report "

• Those btns have a class=".sa-hide-btn-[a,b,c,d]"

• My accordion body has an id="sa-collapse-[a,b,c,d]"

• When I clicked on them, I notice a class in is toggle on my id="sa-collapse-[a,b,c,d]"

---

My goal

is to tweak my JS and only allow 1 accordion to open up at a time.

• which mean if any of the btn is clicked :
• I should take off class in from the rest of the accordion and added to only the one that is clicked.

right ? Is my seem logic correct ?

---

With that in mind - I come up with

 var lists = [ "a", "b", "c", "d" ];

    lists.forEach(function(list) {

      $(".sa-report-btn-" + list).click(function () {

        $("#sa-collapse-" + list).removeClass("in");

        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");



      });

      $(".sa-hide-btn-" + list).click(function () {

        $("#sa-collapse-" + list).addClass("in");

        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");
      
      });

---

Result

All my accordion still opened up every time I click on them.

Fiddle

Can someone please tell me what I missed?

Answer 1

I solved this by doing this

var lists = [ "a", "b", "c", "d" ];

      lists.forEach(function(list) {

      $(".sa-report-btn-" + list).click(function () {

        $("*[class^='sa-report-']").removeClass("hidden");
        $("*[class^='sa-hide-']").addClass("hidden");


        $(".sa-hide-" + list).removeClass("hidden");
        $(".sa-report-" + list).addClass("hidden");

        $(".panel-collapse").removeClass("in");
        $("#sa-collapse-" + list).find( $(".panel-collapse") ).addClass("in");

      });



      $(".sa-hide-btn-" + list).click(function () {

        $(".sa-hide-" + list).addClass("hidden");
        $(".sa-report-" + list).removeClass("hidden");

      });

Answer 2

You have a variable named lists but below, you used list, maybe it's the problem?