散步在海洋中的碼農

<div class="panel-group" id="accordion666">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel primary</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
 </div>

    <script>
        function openpanel() {
            $('#accordion666.panel-body').slideDown();
            $('#accordion666.panel-heading span.clickable').each(function (index, Element) {
                var $this = $(this);
                $this.removeClass('panel-collapsed');
                $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            })
        }
        function hidepanel() {
            $('#accordion666.panel-body').slideUp();
            $('#accordion666.panel-heading span.clickable').each(function (index, Element) {
                var $this = $(this);
                $this.addClass('panel-collapsed');
                $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            })
        }
        $(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>

 

以上文章僅用紀錄資料使用.....