아코디언 효과 만드는 법?

Question

나는 this sample처럼,이 코드에 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

slideToggle() jquery의 방법을 사용하십시오. 아래 코드를 사용해보십시오.

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

CSS : 코드는 항상 당신이 지정한 링크에 주어진 Fiddle

Answer 2

FIDDLE

.box,.boxfooter{ 
    display:none; 
} 

확인합니다.

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