Best Practice for Hiding/Showing Multiple Divs with jQuery

Suppose I have some divs which I want to allow users to switch between. I would write functions like this:

show_A = function () {$('.a').show(); $('.b').hide(); $('.c').hide();}
show_B = function () {$('.a').hide(); $('.b').show(); $('.c').hide();}
show_C = function () {$('.a').hide(); $('.b').hide(); $('.c').show();} 

Then attach these functions to links or whatever. What's the best practice for abstracting out this sort of behavior? The total amount of code grows at N^2 with the number of div开发者_运维知识库s, which is no good.

Give all those divs that you want to hide a common class name and then show one of those. like:

html:

<div class="a toggle">a div</div>
<div class="b toggle">b div</div>
<div class="c toggle">c div</div>

Now the js:

show_A = function () {$('.toggle').hide(); $('.a').show();}
show_B = function () {$('.toggle').hide(); $('.b').show();}
show_C = function () {$('.toggle').hide(); $('.c').show();}

The way I've handled this is before was just to hide them all then show the one (or ones) that you want visible.

Something like...

var showSingleDiv = function(klass) {
    $('.container > div').hide();
    $(klass).show();
};

Granted you don't want to hide every div so you'll need to setup whatever .container is with your own markup.

For each click, you could hide all the divs and then show only the one you need.

You could use a class to tag the divs involved...

<div id="a" class="collapse">...</div>
<div id="b" class="collapse">...</div>
<div id="c" class="collapse">...</div>

And use:

$(".collapse").hide();

You can do something like, by adding a common class to all those elements:

<div class="toggle">a</div>
<div class="toggle">b</div>
<div class="toggle">c</div>

$('.toggle').click(function(){
    $('.toggle:visible').hide();    //Hide all visible 'toggle' div's
    $(this).show();                 //Show the clicked div
});

You can use the :not() selector.

show_A = function () {$('.a').show(); $('div:not(.a)').hide();}

Maybe I'm not understanding the question, but it seems like what he's wanting is something along these lines:

$('div').each().click( function(){
    var cls = $(this).attr('class');
    if( $("div[class*='"+cls+"']").is(':visible')){ $("div[class*='"+cls+"']").hide();}//
    else{ $("div[class*='"+cls+"']").show(); }
}
);

//Disclaimer - I did not check to see if the concatenated selector works, but adapted it from a reputable blog.