Question

I’ve finally found a way to get this to work but the code it a bit long winded and I’m sure there is a better way of doing it. This is does what I want but I want to extend this to work on 10 or so divs and the code would be ridiculous if I used this method. I’ve tried playing around with the .each() method but it just leads to further frustration. If anyone could point me in the right direction I’d be much obliged. Here is a jFiddle of what I have so far: http://jsfiddle.net/QbsbD/47/

$(document).ready(function() {
    $('#btn1').click(function() {
        if ('#div2:visible') {
            $('#div2').hide('fast');
        }
        if ('#div3:visible') {
            $('#div3').hide('fast');
        }
        $('#div1').slideToggle("slow");
    });
    $('#btn2').click(function() {
        if ('#div1:visible') {
            $('#div1').hide('slow');
        }
        if ('#div3:visible') {
            $('#div3').hide('slow');
        }
        $('#div2').slideToggle("slow");
    });
    $('#btn3').click(function() {
        if ('#div1:visible') {
            $('#div1').slideUp('slow');
        }
        if ('#div2:visible') {
            $('#div2').slideUp('slow');
        }
        $('#div3').slideToggle("slow");
    });
});​

Answer 1

Html:

<input type="button" value="Show Div1" class="buttons" data-content-id="div1"/>  
<input type="button" value="Show Div2" class="buttons" data-content-id="div2" />
<input type="button" value="Show Div3" class="buttons" data-content-id="div3" />

JS:

$('#container').on('click', '.buttons', function() {

    var content = $(this).data('contentId');
    $('.hdDivs').not('#' + content).hide('slow');
    $('#' + content).slideToggle("slow");
});

​You’ll store which div you want to display using data attr, then you get it when you click the button.

demo