Slidetoggle the same element using different anchors

172 views Asked by At

I'm trying to toggle a div using different anchors. I've set up my code in a way that the contents of the div "content" change depending on the clicked anchor. What I need to achieve is not having to click twice to toggle the "content" div, because every .block anchor uses the same slidetoggle. When the second block is clicked after the first one is already open, it now closes the content div. I'd like it to toggle back to a closed position and open itself again. When clicking the second block when its already open, it should just close itself. Seems easy, but I can't wrap my head around it...

HTML:

<div id="thumbnails">
    <div title="thumb1" class="block">1</div>
    <div title="thumb2" class="block">2</div>
    <div title="thumb3" class="block">3</div>
</div>

<div id="content">
    <div id="contentblock"></div>
</div>

jQuery:

$(document).ready(function(){   
    $("#content").hide();
    $(".block").click(function() {
        $("#content").slideToggle("slow");
    });
});

Fiddle

1

There are 1 answers

0
Anoop Joshi P On BEST ANSWER

Save the clicked object into a variable, and check if it is matched with the current object(with previous clicked one).

$(document).ready(function(){   
    $("#content").hide();
    var obj;
    $(".block").click(function() {
        $("#content").slideToggle("slow");
        if(obj!==this)
            $("#content").slideDown("slow");

        obj=this;
    });
});

Fiddle