how to make a jquery chart with expandable box with only one expanded box at a time?

I'm working on a jquery chart with expandable box. The main problem is when one box is open and I go to open another, the first one doesn't close. How to make the script that when the second box open and first box close?

I try to use the code in one of the answers here but somehow I cant make it work. Thanks

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 n开发者_开发技巧eque 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");
});

I think you just described an accordian control:

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

Just .slideToggle the open ones closed before opening the new one, something like this:

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

You could animate closing the open ones by replacing .hide() with something else.

Or, you could use an accordion control that someone else has already built and debugged as Steve Wellens suggests.