5. bootstrap-collapse.js(手風琴效果)

1. 基本範例
   <div class="panel-group" id="accordion">
             <div class="panel-heading">
               <!--標題列  -->
               <strong style="font-size: 30px;">手風琴效果示範</strong>
             </div>
             <div class="panel panel-default">
               <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                   <a class="accordion-toggle" href="#">父節點一</a>
               </div>
               <div id="collapse1" class="panel-collapse collapse" style="height: 0px;">
                 <div class="panel-body">
                   <ul class="nav nav-pills nav-stacked">
                     <li><a href="#">子節點一</a></li>
                     <li><a href="#">子節點二</a></li>
                   </ul>
                 </div>
               </div>
             </div>
             <div class="panel panel-default">
               <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                 <a class="accordion-toggle" href="#">父節點二</a>
               </div>
                 <div id="collapse2" class="panel-collapse collapse" style="height: 0px;">
                   <div class="panel-body">
                     <ul class="nav nav-pills nav-stacked">
                       <li><a href="#">子節點一</a></li>
                       <li><a href="#">子節點二</a></li>
                     </ul>
                   </div>
                 </div>
             </div>
           </div>

2. 應用在smarty樣板

   <div class="panel-group" id="accordion">
     <div class="panel-heading">
       <strong style="font-size: 30px;">test</strong>
     </div>
     <{foreach from=$group_list key=k item=unit}>
       <div class="panel panel-primary">
         <div class="panel-heading " data-toggle="collapse" data-parent="#accordion" href="#collapse_<{$k}>">
             <a class="accordion-toggle bg-primary" href="#"><{$unit}></a>
         </div>
         <div id="collapse_<{$k}>" class="panel-collapse collapse" style="height: 0px;">
           <div class="panel-body">
             <ul class="nav nav-pills nav-stacked">
               <{foreach from=$cattreerootArr[$k] key=ctRootId item=ctRootName}>
                 <li><a href="http://www2.tn.edu.tw/modules/tadnews/page.php?nsn=1"><{$ctRootName}></a></li>
               <{/foreach}>
             </ul>
           </div>
         </div>
       </div>
     <{/foreach}>
   </div>

3. jquery-ui(手風琴效果-更佳)
   ※記得先引入jquery-ui，xoops模組請在php檔引入get_jquery(true);

   <script>
     $(function() {
       $( "#accordion" ).accordion({
         collapsible: true
       });
     });
   </script>
   <div id="accordion">
     <{foreach from=$block.group_list key=k item=unit}>
       <h3><{$unit}></h3>
       <div>
         <ul>
           <{foreach from=$block.cattreerootArr[$k] key=ctRootId item=ctRootName}>
             <li><a id="ctRootId_<{$ctRootId}>" href="#"><{$ctRootName}></a></li>
           <{/foreach}>
         </ul>
       </div>
     <{/foreach}>
     
   </div>

4. 參考網站
   https://jqueryui.com/accordion/#collapsible