JQuery 寫bootstrap手風琴效果
阿新 • • 發佈:2019-01-02
<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>