如何制作手风琴效果？

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;
}

检查小提琴