한 번에 하나의 확장 된 상자 만있는 확장 가능한 상자로 jquery 차트를 만드는 방법은 무엇입니까?

Question

확장 가능한 상자가있는 jquery 차트에서 작업하고 있습니다. 주요 문제는 하나의 상자가 열려 있고 다른 상자를 열 때 첫 번째 상자가 닫히지 않는 경우입니다. 두 번째 상자를 열고 첫 번째 상자를 닫을 때 스크립트를 만드는 방법은 무엇입니까?

나는 대답 중 하나에서 코드를 사용하려고하지만 어쨌든 나는 그것을 작동시키지 않는다. 감사합니다

HTML :

<h2 class="trigger"><a href="#">click to see more</a></h2> 
<div class="toggle_container"> 
    <div class="block"> 
     <h3>one</h3> 
     <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p> 

     <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
    </div> 
</div> 

</div> 

JQuery와 :

$(".toggle_container").hide(); 

$("h2.trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow"); 
}); 

Answer 1

난 당신이 그냥 아코디언 컨트롤 설명 생각 :

http://jqueryui.com/demos/accordion/

Answer 2

그냥 .slideToggle 열려있는 사람이를 열기 전에 폐쇄를 새로운 하나, 이런 식으로 :

$('h2.trigger').click(function() { 
    $('.toggle_container').not(':hidden').hide(); 
    $('h2.trigger').toggleClass('active'); 
    $(this).next().slideToggle('slow'); 
} 

당신은 뭔가 다른 .hide()를 대체하여 열려있는 사람을 닫는 애니메이션을 할 수있다.

또는 Steve Wellens가 제안한대로 다른 사람이 이미 빌드하고 디버깅 한 아코디언 컨트롤을 사용할 수 있습니다.