показать все bootstrap accordion

Question

Я пытаюсь запрограммировать ссылку на саундтрек аккордеона, который будет показывать все панели аккордеона при щелчке, а затем при повторном нажатии все панели скрываются.

У меня около 90% работы, кроме верхней панели действует странно. Когда я нажимаю на шоу все в первый раз, он будет скрываться, а другое меню открыто. Когда он переключается назад и вперед, хотя он начинает работать так, как должен.

Мой JQuery выглядит следующим образом

$('#accShow').on('click', function() { 
    if($(this).text() == 'View All') { 
     $(this).text('Hide All'); 
     $('.collapse').collapse('hide'); 
    } else { 
     $(this).text('View All'); 
     $('.collapse').collapse('show'); 
    } 
    return false; 
}); 

и я пытался добавить, но это не имело никакого эффекта:

$('#collapseOne').collapse("show"); 

Answer 1

Взятые и модифицированные from this answer:

$('#accShow').on('click', function() { 
    if($(this).text() == 'View All') { 
     $('.collapse:not(.in)').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
     $(this).text('Hide All'); 
    } else { 
     $(this).text('View All'); 
     $('.collapse.in').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
    } 
    return false; 
}); 

Answer 2

Добавить идентификатор в вашей кнопки Посмотреть все и добавить скрипт:

jQuery(document).ready(function() { 
    jQuery('#idButtonViewAll').on('click', function(e){ 
     jQuery('.accordion-body').each(function(){ 
       jquery(this).addClass("in"); 
     }); 
    }); 
});