CODEWITHSUNDEEP
jqueryjquery-selectors
mixm
mixm

Reputation: 531

select a child of a selector with specific class

im using jQuery and im trying to create a menu using a list of divs which have the class "menuElement". each menuElment div has an id corresponding to the particular menu item. each div menuElement has two divs with classes menuElementHeader and menuElementBody. i want to display the menuElementHeader div initially, and when the user selects the menuElementHeader, the corresponding menuElementBody will be shown using the .show() method. how can i do this using the id of teh menuElement div?

<ul class="horMenu">
    <li>
        <div class="menuElement" id="newTemplate">
            <div class="menuElementHeader">New Template</div>
            <div class="menuElementBody">add template info here</div>
        </div>
    </li>
    <li>
        <div class="menuElement" id="openTemplate">
            <div class="menuElementHeader">Open Template</div>
            <div class="menuElementBody">open template info here</div>
        </div>
    </li>
</ul>

Upvotes: 0

Views: 1695

Answers (3)

Carls Jr.
Carls Jr.

Reputation: 3078

I think this is what you wanted :)

http://jsfiddle.net/jansian/bZHtJ/1/

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 817000

Note that two elements cannot have the same ID! Edit: This is corrected now.

Based on your description I think you want:

$('.menuElementHeader').click(function() {
    $(this).next('.menuElementBody').toggle();
});

Hide all .menuElementBody initially with CSS:

.menuElementBody {
    display: none;
}

Alternatively, you can bind the click handler to the .menuElement elements:

$('.menuElement').click(function() {
    $(this).children('.menuElementBody').toggle();
});

Upvotes: 2

netbrain
netbrain

Reputation: 9304

Are you trying to do somethign like this?

http://jsfiddle.net/xzpkq/

Upvotes: 0

Related Questions