如何使手风琴产生效果？

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

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

检查小提琴

Answer 2

小提琴

代码总是在您指定的链接中给出的.

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