CODEWITHSUNDEEP
javascriptjqueryhtmlcsshide
user3325230
user3325230

Reputation: 517

Jquery hide 2 of 3 divs within an id container

Well I´ve got a problem. My structure looks like:

http://jsfiddle.net/NEFhF/3/

How it should work: When I am clicking on the "id contacts" the "field body" and the "field foot" should get closed / be hidden. The id and the field head - below - shouldn´t disappear that i can click again to toggle this whole container. The fieldbody and field_foot are a few times in my page.

$("#Contacts> field_head").click(function(){
    $("#Contacts > ...").toggle();
});

Was my suggestion but it isn´t working. The other "problem" is, that i ve got more ids whcih include this structure above. Btw. is there an easier way with this?

I am new to jquery, so sorry if it sounds a bit dumb and there are even more of these divs-constructs within my webpage.

Upvotes: 0

Views: 94

Answers (1)

Bhavik
Bhavik

Reputation: 4904

Fiddle
HTML

<div id="Contacts">
    <div class="field_head">
        <p class="heading">Contacts</p>
    </div>
    <div class="body">
        <div class="field_body">This is the contact body</div>
        <div class="field_foot">This is the contact foot</div>
    </div>
</div>
<div id="Geolocation">
    <div class="field_head">
        <p class="heading">Geolocation</p>
    </div>
    <div class="body">
        <div class="field_body">This is the geolocation body</div>
        <div class="field_foot">This is the geolocation foot</div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $(".field_head").click(function () {
        $(this).next('.body').toggle('slow');
    });
});

Upvotes: 1

Related Questions