jQuery的; 如何显示点击div并隐藏所有其他

Question

I'm trying to make a webpage where you click on a button to show and hide a div, my problem now is;

How do I hide all of the other div's by clicking on a specific button.

CodeJava:

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

CodeHTML:

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

So if you click on div2, I want the others to be displayed hidden.

Answer 1

First, add a way to identify all of your div tags with content (generally done with a class) like so:

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

Then, use this function to show/hide content div tags:

function showHide(divId){

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

This assumes that somewhere in your page header you've properly included the jQuery library.

Answer 2

Generally you do that with 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>

With Jquery you can easily access 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 3

Possible one:

function showHide(btn){   
    $(btn).next('.showhide').toggle().siblings('.showhide').hide();
}

DEMO

Following the relevant HTML:

<div onclick="showHide(this)">This is the button.</div>
<div class="showhide">This is a div to hide and show.</div>
<!-- etc... -->