1. 程式人生 > >JQuery 寫bootstrap手風琴效果

JQuery 寫bootstrap手風琴效果

    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="javascript:;">日期</a></h3>
        </div>
        <div class="panel-body">
            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="javascript:;">價格</a></h3>
        </div>
        <div class="panel-body">
            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title"><a href="javascript:;">距離</a></h3>
        </div>
        <div class="panel-body">
            Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
    </div>
    <script type="text/javascript">
        $('.panel-body').hide();
        $('.panel-title').click(function(){
            $(this).parent().next().slideToggle();
            $('.panel-body').not($(this).parent().next()).slideUp();
        });
    </script>