How to make the accordion effect?

Question

I'm trying to make the accordion effect on this code, like 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>

When I click on the boxheader, the box and boxfooter parts appear. How do I to deal this, please?

Answer 1

Use slideToggle() method of jquery. Try the below code.

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

css:

.box,.boxfooter{
    display:none;
}

Check Fiddle

Answer 2

FIDDLE

The code was always given in the link you've specified.

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