Question

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>

Answer 1

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();
});