How can I display a clicked-on div while hiding all other divs using jQuery?

Question

How can I display a clicked-on div while hiding all other divs using jQuery?

I want to create a website where a button can show and hide a specific div, but my challenge is;

How can I ensure that clicking on one button hides all other divs?

Here is the JavaScript code:

function showHide(divId){
    var theDiv = document.getElementById(divId);
    if(theDiv.style.display=="none"){
        theDiv.style.display="block";
    }else{
        theDiv.style.display="none";
    }    
}

And here is the HTML code:

    <div id="div" onclick="showHide('divcontent')"> This is the button. </div>
    <div id="divcontent"> This is a div to hide and show. </div>

    <div id="div2" onclick="showHide('divcontent2')"> This is the button. </div>
    <div id="divcontent2"> This is a div to hide and show. </div>

    <div id="div3" onclick="showHide('divcontent3')"> This is the button. </div>
    <div id="divcontent3"> This is a div to hide and show. </div>

When the user clicks on div2, the intention is to hide the display of other divs.

javascript jquery html css onclick

Answer 1

Answer №1

To start, incorporate a method for distinguishing all of your div tags with content by assigning them a class, like this:

<div id="div" onclick="showHide('divcontent')"> This is the button. </div>
<div class="content" id="divcontent"> This is a div to hide and show. </div>


<div id="div2" onclick="showHide('divcontent2')"> This is the button. </div>
<div class="content" id="divcontent2"> This is a div to hide and show. </div>


<div id="div3" onclick="showHide('divcontent3')"> This is the button. </div>
<div class="content" id="divcontent3"> This is a div to hide and show. </div>

Next, implement the following function to toggle the visibility of content div tags:

function showHide(divId){

    $(".contents").not("#" + divId).hide();
    $("#" + divId).show();
}

It is important to ensure that you have correctly included the jQuery library somewhere in the header of your page.

Answer 2

To start, incorporate a method for distinguishing all of your div tags with content by assigning them a class, like this:

<div id="div" onclick="showHide('divcontent')"> This is the button. </div>
<div class="content" id="divcontent"> This is a div to hide and show. </div>


<div id="div2" onclick="showHide('divcontent2')"> This is the button. </div>
<div class="content" id="divcontent2"> This is a div to hide and show. </div>


<div id="div3" onclick="showHide('divcontent3')"> This is the button. </div>
<div class="content" id="divcontent3"> This is a div to hide and show. </div>

Next, implement the following function to toggle the visibility of content div tags:

function showHide(divId){

    $(".contents").not("#" + divId).hide();
    $("#" + divId).show();
}

It is important to ensure that you have correctly included the jQuery library somewhere in the header of your page.

Answer 3

Answer №2

A probable solution:

function toggleVisibility(button){   
    $(button).next('.showhide').toggle().siblings('.showhide').hide();
}

LIVE DEMO

Here is an example of the corresponding HTML:

<div onclick="toggleVisibility(this)">Click here</div>
<div class="showhide">This is the content to hide and show.</div>
<!-- More code here -->

Answer 4

A probable solution:

function toggleVisibility(button){   
    $(button).next('.showhide').toggle().siblings('.showhide').hide();
}

LIVE DEMO

Here is an example of the corresponding HTML:

<div onclick="toggleVisibility(this)">Click here</div>
<div class="showhide">This is the content to hide and show.</div>
<!-- More code here -->

Answer 5

Answer №3

Typically, this is accomplished using CSS classes.

<div id="div" class="toclick"> This is the button. </div>
<div id="divcontent" class="tohide"> This is a div to hide and show. </div>

<div id="div2" class="toclick"> This is the button. </div>
<div id="divcontent2" class="tohide"> This is a div to hide and show. </div>

<div id="div3" class="toclick"> This is the button. </div>
<div id="divcontent3" class="tohide"> This is a div to hide and show. </div>

Using jQuery, you can easily target the object you clicked on:

$('.toclick').click(function(){
   var doNotDisappear =  $(this).attr('id'); //get id of div
   $('#'+doNotDisappear).next('.tohide').removeClass('tohide');
   $('.tohide').hide(); //make the other disappear
});

Answer 6

Typically, this is accomplished using CSS classes.

<div id="div" class="toclick"> This is the button. </div>
<div id="divcontent" class="tohide"> This is a div to hide and show. </div>

<div id="div2" class="toclick"> This is the button. </div>
<div id="divcontent2" class="tohide"> This is a div to hide and show. </div>

<div id="div3" class="toclick"> This is the button. </div>
<div id="divcontent3" class="tohide"> This is a div to hide and show. </div>

Using jQuery, you can easily target the object you clicked on:

$('.toclick').click(function(){
   var doNotDisappear =  $(this).attr('id'); //get id of div
   $('#'+doNotDisappear).next('.tohide').removeClass('tohide');
   $('.tohide').hide(); //make the other disappear
});

How can I display a clicked-on div while hiding all other divs using jQuery?

Answer №1

Answer №2

Answer №3

Similar questions

Styling components using classes in Material-UI

Using JavaScript to parse JSON and set the value of a DatePicker

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Integration of Django Tastypie with Angular for secure user authentication

Combining Rails 3.1 authenticity tokens with the uploadify feature

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

What is the best way to send a Rails AJAX form upon clicking?

Retrieve the content of the second <li> element using jQuery

Strategies for extracting methods and refactoring to a separate file for better reusability

Incorrect footer navigation on my Vuepress website

The face textures are not being applied correctly to the model imported in THREE.js

Creating a customized function in javascript/jquery with the ability to override it

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

How to effectively pass data between parent and child controllers in Angular 1 - Seeking guidance

Attempting to align the dropdown menu to the left side

How do RxJS collection keys compare?

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

Stop duplicate form submissions in Ajax by implementing form tokens in PHP

Choosing and aiming with jQuery on dynamically created Ajax pages