jQuery Toggle Divs

Question

I'm having a little problem implementing some jQuery into a page I am doing.

I've got about half way to making it do what I want, but I can't get my head around the last part. Though I've used snippets of jQuery for a while I'm pretty new when it comes to writing my own code.

Basically I want 4 Divs which are hidden by default to be opened by clicking on the relevant link, but only one Div should be shown at any one time, so if Div1 has been opened, clicking the Div2 button closes Div1 and opens Div2.

Also there is a 5th button, which opens Div1 is no Divs are open, or if any Div is open, to close that open Div.

I've been looking at these pages for help, but nothing is exactly what I'm after:

http://css-tricks.com/forums/discussion/16451/.slidetoggle-one-div-a-time-problems-please-help/p1

www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

webdesignerwall.com/tutorials/jquery-tutorials-for-designers

At the moment I've made it so that the Divs appear on a button click, but that's all, I can't work out to make the toggle logic from these examples work on my code.

I've set up a JSFiddle here: http://jsfiddle.net/vx6qu/2/

Thanks in advance

Answer 1

You were close, but there is a cleaner approach:

http://jsfiddle.net/jbabey/vx6qu/3/

$('#toggle-image').on('click', function () {
    if ($('.toggled').length === 0) {
        // none are open, open the first
        $('.toggle-content').eq(0).slideToggle().addClass('toggled');
    } else {
        // one is open, hide it
        $('.toggled').slideToggle().removeClass('toggled');
    }
});

$('li > a').on('click', function () {
    // extract the number
    var num = parseInt(this.id.replace('toggle-', ''), 10);

    // cancel the event if they clicked the link that is already open
    if ($('.toggle-content').eq(num - 1).hasClass('toggled')) {
        return false;    
    }

    // hide the old one
    $('.toggled').slideToggle().removeClass('toggled');

    // show the new one
    $('.toggle-content').eq(num - 1).slideToggle().addClass('toggled'); 
});

Answer 2

<div id='div1' style='display:none;'>Div 1</div>
<div id='div2' style='display:none;'>Div 2</div>
<div id='div3' style='display:none;'>Div 3</div>
<div id='div4' style='display:none;'>Div 4</div>

<a href='showDiv(1);'>Show Div 1</a>
<a href='showDiv(2);'>Show Div 2</a>
<a href='showDiv(3);'>Show Div 3</a>
<a href='showDiv(4);'>Show Div 4</a>

<script>
var showDiv = function(n) {
    var i;
    for (i = 1; i < 5; i++) {
        if (i == n)
            $('#div' + i).show();
        else
            $('#div' + i).hide();
    }    
}
</script>

Answer 3

I think what you are looking for is the "hidden" selector, eg:

if( jqueryObject.is(':hidden') ) {
    // it's hidden
} else {
    // it's not
}

This also works with is(':visible')

Answer 4

The solution is quite simple:

• close everything, regardless which one is open
• open only the one you need

var current = null;
var all = $(".togglediv");

function onClickOne() {
    all.hide();
    current = $("#one").show();
}
function onClickTwo() {
    all.hide();
    current = $("#two").show();
}
...

function onClickSpecial() {
    if (current) {
        all.hide();
        current = null;
    } else
        current = $("#one").show();
}