上下矢印でパネルを折りたたむ方法

Question

私のWebページの1つにPanel Collapse機能を追加しようとしています。 ブートストラップを使用して上下矢印で追加する方法

Answer 1

<style> 
.clickable { 
cursor: pointer; 
} 

.panel-heading span { 
margin-top: -20px; 
} 
</style> 

<script> 
    $(document).ready(function() { 
     $('#myTable').DataTable(); 
    }); 

    $(document).on(
      'click', 
      '.panel-heading span.clickable', 
      function(e) { 
       var $this = $(this); 
       if (!$this.hasClass('panel-collapsed')) { 
        $this.parents('.panel').find('.panel-body').slideUp(); 
        $this.addClass('panel-collapsed'); 
        $this.find('i').removeClass('glyphicon-chevron-up') 
          .addClass('glyphicon-chevron-down'); 
       } else { 
        $this.parents('.panel').find('.panel-body').slideDown(); 
        $this.removeClass('panel-collapsed'); 
        $this.find('i').removeClass('glyphicon-chevron-down') 
          .addClass('glyphicon-chevron-up'); 
       } 
      }) 
</script> 

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Panel 1</h3> 
     <span class="pull-right clickable"><i 
      class="glyphicon glyphicon-chevron-up"></i></span> 
    </div> 
    <div class="panel-body"> 
     <div> 
      What is Lorem Ipsum?<br /> Lorem Ipsum is simply dummy text of the 
      printing and typesetting industry. Lorem Ipsum has been the 
      industry's standard dummy text ever since the 1500s, when an unknown 
     </div> 
     <div>&nbsp;</div> 
     <div> 
      Why do we use it?<br /> It is a long established fact that a reader 
      will be distracted by the readable content of a page when looking at 
      its layout. The point of using Lorem Ipsum is that it has a 
     </div> 
    </div> 
</div> 
<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Panel 2</h3> 
     <span class="pull-right clickable"><i 
      class="glyphicon glyphicon-chevron-up"></i></span> 
    </div> 
    <div class="panel-body"> 
     <table class="table" id="myTable"> 
      <thead> 
       <tr> 
        <th>Firstname</th> 
        <th>Lastname</th> 
        <th>Email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>John</td> 
        <td>Doe</td> 
        <td>john@example.com</td> 
       </tr> 
       <tr> 
        <td>Mary</td> 
        <td>Moe</td> 
        <td>mary@example.com</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>