Как можно только открыть 1 аккордеон одновременно?

Question

У меня есть 4 accordions < - нажмите здесь, чтобы увидеть

• прямо сейчас все они будут открывать, когда я нажимаю на "View Report"
• Эти кнопок BTN имеют class=".sa-hide-btn-[a,b,c,d]"

• У моего аккордеонного корпуса есть id="sa-collapse-[a,b,c,d]"

• Когда я нажал на них, я заметил класс in является переключение на мой id="sa-collapse-[a,b,c,d]"

---

Моя цель

является надрать JS и только позволяют аккордеон, чтобы открыть в то время.

• что означает, если любой из баттона щелкает:
• я должен снять класс in от остальной части аккордеона и добавил только тот, который щелкнул.

правый? Я считаю, что логика правильная?

---

Имея это в виду, - я придумал

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

     }); 

---

Результат

Все мои аккордеон все еще открыт каждый раз, когда я нажимаю на них.

Fiddle

Может кто-то пожалуйста, скажите мне, что я пропустил?

Answer 1

Я решил эту проблему, делая это

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

У вас есть список имен переменных, но ниже, вы использовали список, может быть, это проблема?