animate multiple divs expand collapse problem

I'm struggling to get this circles animated expand collapse to work, you can take a look at it here. The problem is once a circle is clicked then the next time you want to expand it the first click is not responding only the second click work开发者_C百科s. I think a single function that gets id's will solve this but I cant figure how to that.

Here's part of my code:

<ul class="circles">
<li>
    <div>
        <div class="clear"></div>
        <p id="circle_info_1_toggle"><a href="#" >Products</a></p>                          
    </div>
</li>
<li>
    <div>
        <div class="clear"></div>
        <p id="circle_info_2_toggle"><a href="#" >Machinery</a></p>                             
    </div>
</li>

<div id="circles_info_container"> 
    <div id="circle_info_1"> 
        <div class="wrapper">                               
            <h3>We use environmentally-friendly, non-toxic products in all of our work.</h3> 
            <a href="http://www.guarantee-green.com/our-products"><div class="circles_readmore"></div></a> 
        </div> 
    </div>  
    <div id="circle_info_2"> 
        <div class="wrapper">                   
            <h3>We use powerful, modern machinery that removes dirt, grime and soil.</h3> 
            <a href="http://www.guarantee-green.com/our-methods"><div class="circles_readmore"></div></a> 
        </div> 
    </div>

and the jquery:

$(document).ready(function() {
/* Circle 1*/
$('#circle_info_1_toggle a').click(function() { return false; });   
$('#circle_info_1_toggle a, #circle_info_1').toggle(circle_open_1, circle_close_1);

/* Circle 2*/
$('#circle_info_2_toggle a').click(function() { return false; });   
$('#circle_info_2_toggle a, #circle_info_2').toggle(circle_open_2, circle_close_2);
}); 

// Functions
function close_all_circles() {
    $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:true});
    $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:true});
}

    /* Circle 1*/
    function circle_open_1() {  
        close_all_circles();
        $('#circle_info_1 .wrapper').animate({ height:'120px' }, {duration:250});   
    }
    function circle_close_1() {     
            $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});        
    }

    /* Circle 2*/
    function circle_open_2() {  
        close_all_circles();
        $('#circle_info_2 .wrapper').animate({ height:'120px' }, {duration:250});   
    }
    function circle_close_2() {     
            $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});        
    }

Thanks!

---

Try something like this:

$('#circles a').click(function () {
    // close all.
    $('#circles_info_container .wrapper').animate({ height:'0px' }, {duration:250, queue:true});

    // open clicked one.
    var num = $(this).parent().attr('id').replace('circle_info_', '').replace('_toggle', '');
    $('#circle_info_' + num + ' .wrapper').animate({ height:'120px' }, {duration:250});   
});

If you want to make sure the close animations complete before starting to animate the open, you can do that via the complete parameter passed to animate(), which is a delegate to a callback function that will be invoked once the animation completes.

---

It's because you are using toggle, which calls hide and show parts with alternate clicks. Your code is working fine and as expected.

---

What i mean is that, if content reletad to circle 1 is already hidden, and if you click it second time, you try to hide corresponding content again. Which does nothing.