jQuery hide/show div onclick span

Question

I'm trying to get the swing of jQuery for an project and I pick up some things here and there but every now and then I hit a bumb.

On this jsFiddle you can see what I'm working on: http://jsfiddle.net/YpeeR/17/

jQuery(document).ready(function() {
jQuery('.toggle_hide').hide();

jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $('.toggle_hide').not($this.next("div")).fadeOut(200, function() {
        $this.next("div").fadeIn(200);
    });
});

});

I have 4 divs hidden inside an li element. The div get shown when the user clicks on the span tag inside that li element where the div is and other div's get closed down. This works fine but I want to user to be able to toggle the current div too.

So when the user clicks an span in an li element the div that's hidden gets shown and when the user clicks on the same span again I want the div to hide again.

Unfortunately fadeToggle does not seem to do the trick propper as you can see here http://jsfiddle.net/YpeeR/18/ , but I can't seem to figure out why that is...

I can see you understand how **Stack*Overflow*** works! 'Question'... jsFiddle... Comments... Now tell us... is it so hard to accept an answer? — Roko C. Buljan, Aug 20 '11 at 18:17

score 1 · Accepted Answer · answered Aug 20 '11 at 16:22

I slowed it down to show the changes: http://jsfiddle.net/YpeeR/23/

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
})

You were calling $this.next("div").fadeIn(200); 3 times for each div, not $this.next, once their animations finished.

Wauw thanks! That did the trick, man this jQuery is awesome but kind of anoying to bugfix, but learned a lot today. — Peter Boomsma, Aug 20 '11 at 16:35

score 1 · Answer 2 · answered Aug 20 '11 at 16:26

It is acting strange because you are putting the fadeToggle in the callback for the other divs' fadeOut, which is called three times since there are three other divs. So it toggles three times each click and you see it blink once. Try this instead:

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $('.toggle_hide').not($this.next("div")).fadeOut(200);
        $this.next("div").fadeToggle(200);
    });
});

http://jsfiddle.net/Paulpro/YpeeR/25/

jQuery hide/show div onclick span

2 Answers2

Linked