CODEWITHSUNDEEP
jquery
Ganesh Yadav
Ganesh Yadav

Reputation: 2685

slideUp doesn't work with .next()

I'm target divs for slideUp() and slideDown() with .next() event. everything is working fine except when I click for slideUp, It goes up and then again comes down. I Want to slideToggle on click of same button. demo fiddle

<div class="earnContent">toggle one</div>
<div class="content">content one</div>
<div class="earnContent">toggle two</div>
<div class="content">content tow</div>
<div class="earnContent">toggle three</div>
<div class="content">content three</div>

js:

$(".earnContent").click(function(e) {
    $(".content").slideUp(300);
    $(this).next().slideDown(300);
});

Upvotes: 0

Views: 179

Answers (3)

palaѕн
palaѕн

Reputation: 73906

This is simple:-

$(".earnContent").click(function (e) {
    $(".content").not($(this).next()).slideUp(300);
    $(this).next().slideToggle(300);
});

FIDDLE DEMO

Upvotes: 1

Stryner
Stryner

Reputation: 7318

One possible solution is the following:

$(".earnContent").click(function(e) {
    // Retrieve current content
    var $thisContent = $(this).next();

    // Hide any other shown content
    $(".content").not($thisContent).slideUp(300);

    // Toggle the visibility of current content
    $thisContent.slideToggle(300);
});

Fiddle Here

Upvotes: 1

Manwal
Manwal

Reputation: 23816

Here i changes done by me:

$(".earnContent").click(function(e) {
    flag = ($(this).next().css('display')=='block');
    $(".content").slideUp(300);
    if(!flag)
      $(this).next().slideDown(300);
});

Note: In flag i am checking if next content div is not block means already closed then only open it otherwise don't.

DEMO

Upvotes: 1

Related Questions