Question

I have a show and hide function for some divs and more divs need to be added:

    $(document).ready(function() {
    $('[id^=des_]').hide();

    $('.notification, .description span').hover(function() {
        $(this).css('cursor', 'pointer');
    }, function() {
        $(this).css('cursor', 'auto');
    });

    $("#list_01").click(function() {
        $("#des_01").show();
        $("#des_02").hide();

    });

    $("#list_02").click(function() {
        $("#des_02 ").show();
        $('#des_01').hide();
    });

});

How do I hide all the other divs when one is opened? Can someone help?

Working example is http://jsfiddle.net/tpWEk/

Answer 1

Assuming the naming conventions for your div IDs are all going to follow the same pattern, you could do something like this, so you don’t need to repeat code for every new element:

$("div[id^='list_']").click(function() {
    $("div[id^='des_']").hide();
    $(this).next().show();
});

Here’s an updated fiddle. It uses the “attribute starts with” selector to bind a click event handler to all div elements whose id starts with “list_”. In that event handler it hides all div elements whose id starts with “des_”, gets the next element (which in your example is the correct div) and shows that.