CODEWITHSUNDEEP
javascriptjqueryslidetoggle
user5278424
user5278424

Reputation: 55

Have only 1 div toggle instead of all

running into issues of trying to have only 1 div toggle instead of them all toggle. I've tried using next() and setting the selector to the children as opposed to the parent element, but then it won't toggle open at all.

FIDDLE: http://jsfiddle.net/L415g07n/2/

What I am specifically trying to accomplish? Have the selected div toggle when .toggle is clicked instead of all of them being toggled at once.

var c1 = $("#o");
var c2 = $("#t");
var c3 = $("#th");
$(document).ready(function () {
    $(c1).hide(0).delay(500).fadeIn(1500);
    $(c2).hide(0).delay(1500).fadeIn(1500);
    $(c3).hide(0).delay(2500).fadeIn(1500);
});
var content = $("#main .column .body");
$(content).hide();
var t1 = $(".toggle");
$(t1).click(function () {
    $(content).slideToggle('slow');
    $(t1).toggleClass("toggle");
    $(t1).toggleClass("toggle-d");
});

Upvotes: 1

Views: 65

Answers (2)

Blaž Zupančič
Blaž Zupančič

Reputation: 2356

jQuery's $(this) alows you to apply your effects on the current element. Here's the correct, shorter and simpler version of your code:

 $(document).ready(function () {
    $(".column, .body").hide(); // you should put this in your CSS ( .column, .body { display: none; } )

    $(".column").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });

    $(".toggle").click(function () {
        $(this).toggleClass("toggle").toggleClass("toggle-d").parent().next(".body").slideToggle();
    });
});

Notice, how you can even improve the part when your divs fade in, by reffering to them with a class name instead of id by using $(this) and .each().

I think w3schools explains $(this) quite nicely.

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use this object and traverse to the required nodes,

$(t1).click(function () {
   $(this).toggleClass("toggle")
          .toggleClass("toggle-d")
          .parent().next('.body').slideToggle('slow');
});

DEMO

Upvotes: 1

Related Questions