JQuery problem with .toggle function

Question

HTML:

<div class="showcase">
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div>

<div class="showcase" style="display: none;">
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div>

<div class="showcase" style="display: none;">
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
       <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div>

JavaScript:

$(document).ready(function() {
    $('.click').click(function() {
       $('.showcase').fadeOut('fast'); 
       $('.showcase').next('.showcase').show('fast');
    });
});

that is how my code is right now the only problem is when I press the div... the next 2 showcases are showing up I want to just the next showcase en when it is clicked again the next showcase div, how can I do this? :)

Where is the element with class='click'?

Andrew Whitaker
– Andrew Whitaker

2011-07-31 16:58:01 +00:00
Commented Jul 31, 2011 at 16:58 — Andrew Whitaker
– Andrew Whitaker, Commented Jul 31, 2011 at 16:58

Peter Ajtai · Accepted Answer · 2011-10-09 21:07:10Z

1

Here you go: http://jsfiddle.net/MDEE2/1/

Basically, I added a variable to track which of the showcases that are currently being viewed, and then I just took the next one and made it pop-up.

$(document).ready(function() {
    $('.click').click(function() {
        var active_show = $('.showcase:visible');
        active_show.fadeOut('fast');
        active_show.next('.showcase').show('fast');
    });
});

edited Oct 9, 2011 at 21:07

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

answered Jul 31, 2011 at 17:10

karllindmark

6,0601 gold badge28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ipr101 · Accepted Answer · 2011-07-31 17:01:02Z

0

I think your problem is the $('.showcase') selector is applying to all the 'showcase' 'div' elements on the page. Is it possible for you to work out which 'div' has been clicked within the $('.click').click function?.

answered Jul 31, 2011 at 17:01

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

legendofawesomeness · Accepted Answer · 2011-07-31 17:04:55Z

0

First of, $('.click') is not going to work, because there is no element in your HTML with that class. I think this is what you need:

$(document).ready(function() {
    $('.showcase').click(function() {
       $(this).fadeOut('fast'); 
       $(this).next('.showcase').show('fast');
    });
});

answered Jul 31, 2011 at 17:04

legendofawesomeness

2,9212 gold badges21 silver badges32 bronze badges

Comments

Peter Ajtai · Accepted Answer · 2011-07-31 17:26:26Z

$(".showcase") selects all elements with the class showcase. From your code it's hard to tell precisely what you want, but here's some code that will hide the first visible .showcase and show the next one.

$(document).ready(function() {
  $('.click').click(function() {
     $('.showcase:visible').eq(0).fadeOut('fast').next('.showcase').show('fast');
  });
});

References:
:visible
eq() - or .first() - or .filter(":first")

But if all the .showcases are invisible you want to just show the first one. So the whole code is:

$(document).ready(function() {
  $('.click').click(function() {
   if ($('.showcase:visible').length > 0)
     $('.showcase:visible').eq(0).fadeOut('fast').next('.showcase').show('fast');
   else
     $('.showcase').eq(0).show('fast');
  });
});

Working example

And finally, you can probably clean it up to:

$(function() {
    $('.click').click(function() {
        var $visible  = $('.showcase:visible'),
            $showcase = $('.showcase');
        if ($visible.length > 0)
            $visible.fadeOut('fast').next('.showcase').show('fast');
        else
            $showcase.eq(0).show('fast');
  });
});

Collectives™ on Stack Overflow

JQuery problem with .toggle function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related