避免 Bootstrap 開闔式內容 (accordion) 收闔

問題簡述

雖然開闔式內容 (accordion) 最原初的目的，
是要讓使用者可以集中注意力於面板上的內容，
因此當開啟其他項目時，原本顯示的項目應該要收闔。

邏輯上應該是這樣。

但最近遇到有客戶想要「點開其他項目的時候，原本的項目不要收闔」。

解決方案

由於使用的佈景主題引入了 Bootstrap，因此上網搜尋了相關的解決方法。這個程式碼片段是複製 https://www.codeply.com/go/bp/90JfjI2Q7n 的做法。

<script>
(function ($) {
    $('a[data-toggle="collapse"]').on('click', function () { //在 Bootstrap 使用 data-toggle 來做選擇器
        var objectID = $(this).attr('href');
        if ($(objectID).hasClass('in')) {
            $(objectID).collapse('hide');
        } else {
            $(objectID).collapse('show');
        }
    });
})(jQuery);
</script>

概念上其實不難，但是一開始擔心會不會和原本 Bootstrap 的功能衝突。
實際測試之後好像沒有太大的問題，所以就拿來用了。

但說真的，整個網站只有一個頁面需要使用這段 JavaScript 指令碼，
如果全部都引用的話，蠻沒有效率的。
所以還是在 functions.php 裡面做條件篩選。（到底為什麼要用這樣）

<?php
if( preg_match( '/.*csr.*/', get_query_var( 'pagename' ) ) ) {
    wp_enqueue_script( 'accordion-fix', get_stylesheet_directory_uri() . '/js/accordion-fix.js', array( 'jquery' ), '', true );
    }

全部都是蠻幹塞上去的做法，其實蠻不喜歡的。
如果有更好的做法，也可以再跟我分享。