Jquery How To Make Slidetoggle Applies One Each Item

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them. Could someone please help ? Thanks Online Sample

Solution 1:

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.

This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").

See the updated FIDDLE.

Updated your jQuery code:

$(".warp").click(function () {
    var$warp = $(this);

    $warp.next(".invisible").slideToggle("slow", function () {
        if ($(this).is(':visible')) {
            $warp.removeClass('bg');
        }else{            
            $warp.find('span.click').css('visibility', 'visible');  
            $warp.addClass('bg');
        }
    });

    $warp.find('span.click').css('visibility', 'hidden');      
});

Solution 2:

HERE: jsfiddle

jquery:

$('.invisible').hide();
$(".warp").click(function () {
        $(this).next('div').slideToggle("slow", function () {
            $(this).prev('div').toggleClass('bg');
            $(this).prev('div').find('.click').slideToggle("fast", function () {});
        });
});

Share