Click to show one and hide others - jQuery toggle

Question

I have a carousel where on click I am trying to show content in one item but hide in all other others.

The function work only proportionally. When I click on other item it hides all the others. But when I click on the open item it hides it and show straight after. I want this item to hide on second click if possible?

 var dd = $(".last-line");
 $(".image").click(function(e) {
 e.preventDefault();
 e.stopPropagation();
 dd.slideUp();
 $(this).next().next().slideDown();
 });

 $(document).click(function() {
 dd.slideUp();
 });

dd.click(function(e) {
e.stopPropagation();
});

Here is my fiddle.

Thank you all for your help in advance.

Answer 1

You'd usually do that something more like this

$(".image").click(function (e) {
    if (e.target == this) {
        var that = $(this).siblings('.last-line');
        $(".last-line").not(that).slideUp();
        that.slideToggle();
    }
});

FIDDLE