搜索欄自舉折疊式按鈕的折疊/展開按鈕

Question

如何修改此Codepen中的代碼以具有“全部展開”和“全部折疊”按鈕？

https://codepen.io/anon/pen/OZgebe

包含的JS：

(function(){
 var searchTerm, panelContainerId;
 // Create a new contains that is case insensitive
 $.expr[':'].containsCaseInsensitive = function (n, i, m) {
   return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
 };

 $('#accordion_search_bar').on('change keyup paste click', function () {
   searchTerm = $(this).val();
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
   $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
'))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
')').show();
  });
  });
}());

另外，如果我最終在這些手風琴中放了子手風琴，我該怎么做才能將這些手風琴包括在此“折疊/擴展”功能中，或者它們應該一發不可收拾？

非常感謝您的幫助。

Answer 1

嘗試這個：

在此處查看演示

JS

  $(".btn-expand-all").on("click", function() {
    $(".panel-collapse").collapse("show");
  });
  $(".btn-collapse-all").on("click", function() {
    $(".panel-collapse").collapse("hide");
  });