Question

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);
        });
    });
</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.

Answer 1

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>