CODEWITHSUNDEEP
jquery
user505790
user505790

Reputation: 21

Looping with jQuery

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/

Upvotes: 1

Views: 508

Answers (3)

user920041
user920041

Reputation:

To simplify your work and preventing reinventing the wheel, you may have a look at jQuery Accordion: http://jqueryui.com/demos/accordion/

Demo working on your code: http://jsfiddle.net/ANCbg/2/

Hope this is useful for your project!

Upvotes: 0

Riz
Riz

Reputation: 10246

$(".notification").click(function() {
        $(".description").hide();
        $(this).next().show();
    });

Upvotes: 0

James Allardice
James Allardice

Reputation: 166061

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.

Upvotes: 4

Related Questions