jQuery hide/show div onclick span

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 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.

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/