Concealing two out of three div elements inside a specified id container using jQuery

Question

Concealing two out of three div elements inside a specified id container using jQuery

I have encountered an issue with my structure, which looks like this:

This is how it should work: When I click on the "id contacts", the "field body" and the "field foot" should be hidden. However, the id and the field head below should remain visible so that I can click again to toggle the entire container. The field body and field foot are present multiple times on my page.

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

This was my suggested solution, but it did not work as expected. Another issue I am facing is that there are more ids in my structure similar to the one described above. Is there a simpler way to achieve this using this?

I am new to jQuery, so please excuse me if this question sounds naive. Additionally, there are several more of these div constructs within my webpage.

javascript jquery html css hide

Answer 1

Answer №1

Code Playground
HTML Code Snippet

<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 Code

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

Answer 2

Code Playground
HTML Code Snippet

<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 Code

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

Concealing two out of three div elements inside a specified id container using jQuery

Answer №1

Similar questions

New techniques in VueJS 3: managing value changes without using watchers

"Why does Sequelize migration successfully create a table, yet the models are unable to establish a connection to the

When requesting the second page in PagedList.MVC within MVC, the search model is reset

The verification of form is not done using an if statement

The state of the button remains unchanged in jQuery/Rails 3

Ways to display an SVG spinner prior to a substantial UI refresh

Showing dynamic content retrieved from MongoDB in a list based on the user's selected option value

What is the best way to connect an image to a different webpage?

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Issues with displaying Angular Material's ng-messages in a dialog box

Adjust hyperlink destination based on the current content being shown

Jquery: Transforming Content with Rotator or Slider - Seeking Answers

Vibrant progress bar design with CSS

PHP for Beginners: Implementing Headers and Footers

When the window size is reduced, the image continues into the next div

Tips on displaying inline span text within an anchor element, above the anchor text

HTML block failing to implement Bootstrap styling

What is the method for inputting multi-line strings in the REST Client extension for Visual Studio Code?

Convert all SASS code into CSS within a Nuxt project

Tips for adjusting the font size of choices within the Material UI autocomplete component