Only 1 div toggle status jQuery (close others)

I'm currently working with fadeToggle to show/hide certain elements and what I got here seems to do the job quite well! When a span element is clicked that's inside an li element it fadetoggles the next div that's inside the li element. Pretty nifty I would say!

<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle_hide').hide();

        $("#background_absolute_content li span").css('cursor', 'pointer').click(function(){
            $(this).next("div").fadeToggle(200);
   开发者_JAVA技巧     });
    });
</script>

But ofcourse there's allways something you just can't seem to figure out!

I only want one div to be toggled and currently they don't close after a next span here you can see the website. If you click on the linkedin and the facebook icon next to the line "now compatible with" you'll see what I mean.

So is there a way to close the div when a next span is clicked.

Note I use this method aswell on the config icon on the top right.

I've never been a fan of the toggle commands. I usually manually fadeOut/fadeIn...

<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle_hide').hide();

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

Suppose a quick and dirty fix is to call your hide method before showing the one relevant to what was clicked. Insert your method:

$('.toggle_hide').hide();

before you call:

$(this).next("div").fadeToggle(200);