如何制作手風琴效果？

Question

我正在嘗試在此代碼上制作accordion效果，例如以下示例 ：

<div class="row">
    <div class="col-sm-5 col-md-3 boxcontainer">
        <span class="boxheader">
            1
        </span>
        <div class="box">
            ABC
        </div>
        <div class="boxfooter">
            DEF
        </div>
    </div>
    <div class="col-sm-5 col-md-3 boxcontainer">
        <span class="boxheader">
            2
        </span>
        <div class="box">
            ABC
        </div>
        <div class="boxfooter">
            DEF
        </div>
    </div>
</div>

當我單擊boxheader ，將顯示box和boxfooter部件。 請問我該如何處理？

Answer 1

小提琴

該代碼始終在您指定的鏈接中給出。

 $(function() {
    $( "#accordion" ).accordion();
  });

Answer 2

使用jquery的slideToggle（）方法。 試試下面的代碼。

$("body").on("click",".boxheader",function(){
   $(".box").hide();
   $(".boxfooter").hide();
   $(this).parent().find(".box").slideToggle();
   $(this).parent().find(".boxfooter").slideToggle();
});

CSS：

.box,.boxfooter{
    display:none;
}

檢查小提琴