Jquery: Slideup all, Slide down which is clicked - if clicked is already open toggle it.. Need help on last bit, please

I'm still quite new with jQuery, I know that I could "google" and have something very similar up and running in 5 mins, but I'm learning - I need to make the mistakes and ask!

I was sure this should work but the last step didn't.. If someone has a way of creating this effect or knows how to clean-up my code it would be much appreciated but more so if someone could tell me where I have gone wrong..

    //intial load
$(document).ready(function(){

    // row has been clicked
    $(".fp_row").bind('click', function(){

        //row id has been set to item_clicked
        var item_clicked = $(this).attr('rel');
        //Item_hidden is the div that shows or hides, like accordion menu
        var item_hidden = $("#" + item_clicked + "_hide").attr('rel');

        //hide all that are open, and then toggle the one you clicked..
        $(".fp_dropdown_box").slideUp("slow", function(){
            $("#" + item_hidden + "_hide").not(".fp_dropdown_box").slideToggle("slow");
        });

    });


});

I'm making a page with rows of headlines, when you click a row a div slides out revealing more information, just like an accordion. I can currently make the box you click on open and all others close. I can make all open at once and close at once.. But I am having problems making one open then if you click it again it closes,currently It slides up and then down again.

How I thought the code above worked.. On initial load, when a row is clicked grab the rel value (which is what I'm using for a unique identifier for each row) then slide-up all rows that are currently open but not the one you have clicked on toggle slide this..

<!--- row --->
    <div id="1_row" class="fp_row clearfix" rel="1">
        <!--- time --->
        <div class="fp_col fp_col_time"><p>the time</p></div>
        <!--- title --->
        <div class="fp_col fp_col_title"><p>the title</p></div>
    </div>

    <!--- hidden information --->
    <div id="1_hide" rel="1" class="fp_dropdown_box clearfix" style="<cfif qEvents.event_id EQ url.event_id>display:;<cfelse>display:none</cfif>" > 
        <div class="fp_dropdown_content"><p>the hidden information</p></div>
    </div>

Ok so after the comments, I managed to get the script to somewhat work - the only problem left is that it opens then closes twice before stopping at the state I want it to be..

Updated Code.

    //intial load
$(document).ready(function(){

    // row has been clicked
    $(".fp_row").bind('click', function(){

        //The Id of the clicked Row
        var item_clicked = $(this).attr('rel');
        console.log("The ID of the clicked Row: (" + item_clicked + ")");

        //Creates variable ID for the hidden item
        var item_hidden = $("#" + item_clicked + "_h开发者_开发百科ide").attr('rel');
        console.log("The Hidden Item ID (" + item_hidden + ")");

        //Creates variable to test if the hidden item is true or false.
        var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none';
        console.log("test if hidden item is hidden (" + item_is_hidden +")");

            //slide up all that are open
            $(".fp_dropdown_box").slideUp("slow", function(){
                //test to see if it is open: true/false
                 if(item_is_hidden)
                    {
                    console.log("condition worked!");
                    //Run the slidedown on hidden item
                        $("#" + item_hidden + "_hide").slideDown("slow");
                    }
                else
                       {
                    $("#" + item_hidden + "_hide").slideUp("slow");
                    }
            });
    });
});

---

this is my final edit, I think this was the cleanest way

$(document).ready(function() {

    $('div.cont > div').hide(); 

    $('div.cont> h3').click(function() {
        $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
    });
});

---

The problem is just that you hide them all, then toggle the clicked one - so it will always be shown. You need to detect whether it's shown or not and act appropriately.

var item_hidden = $("#" + item_clicked + "_hide").attr('rel');
var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none';

$(".fp_dropdown_box").slideUp("slow", function(){
    if(item_is_hidden)
       $("#" + item_hidden + "_hide").slideToggle("slow");
});

---

1., Accept more answers from your previous questions.

2., Add HTML too, so we can do some "really smart refactoring".