如何制作手风琴效果？

Question

我正在尝试对此代码产生accordion效果，例如this sample：

<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

FIDDLE

代码始终在您指定的链接中提供。

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

检查Fiddle