javascript - Show Hide div with css only - Stack Overflow

admin管理员组

文章数量:1193364

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.

    <div class="span3">
        <img src="an1.jpg" class="img-rounded" />
        <h3>AN1<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an2.jpg" class="img-rounded" />
        <h3>AN2<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an3.jpg" class="img-rounded" />
        <h3>AN3<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an4.jpg" class="img-rounded" />
        <h3>AN4<br />1234</h3>
    </div>

Show div when div is click:

<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.

    <div class="span3">
        <img src="an1.jpg" class="img-rounded" />
        <h3>AN1<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an2.jpg" class="img-rounded" />
        <h3>AN2<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an3.jpg" class="img-rounded" />
        <h3>AN3<br />1234</h3>
    </div>

    <div class="span3">
        <img src="an4.jpg" class="img-rounded" />
        <h3>AN4<br />1234</h3>
    </div>

Show div when div is click:

<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

• javascript
• css
• xhtml

Share Improve this question Follow asked Jun 11, 2013 at 10:47 acctmanacctman 4,3493030 gold badges103103 silver badges147147 bronze badges 4

• There are no click event handlers in CSS. – Alex Gill Commented Jun 11, 2013 at 10:50
• JQuery is must in this condition – Aravind30790 Commented Jun 11, 2013 at 10:51
• You'll need jQuery or Javascript to bind click events. – Nick R Commented Jun 11, 2013 at 10:52
• You need javascript for this, if you want to use as little javascript as possible then handle all the show/hide elements with a css class and add/remove that class with javascript – Mark Walters Commented Jun 11, 2013 at 10:52

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

You can use a hidden input that can be toggled that corresponds to the label in the click area.

<div class="span3">
<label for="an1">
    <img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>

Then in your CSS:

[type=checkbox] {
    display: none;
}
:checked + div {
    display: block !important;
}

I would also stear clear of style and just use the stylesheet.

http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/

In most browsers you should simply use the href attribute of the a elements and an id for the element to show:

<a href="#div1">Div one</a>
<a href="#div2">Div two</a>
<a href="#div3">Div three</a>
<a href="#div4">Div four</a>

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

Coupled with the CSS:

#content > div {
    display: none;
}

#content > div:target {
    display: block;
}

JS Fiddle demo.

In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).

To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):

<ul id="andHideAgain">
    <li><a href="#div1">Div one</a></li>
    <li><a href="#div2">Div two</a></li>
    <li><a href="#div3">Div three</a></li>
    <li><a href="#div4">Div four</a></li>
</ul>

<div id="content">
    <div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
    <div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>

JS Fiddle demo (link in each div).

Or the simple use of just a hash:

• Div one
• Div two
• Div three
• Div four
• hide

<div id="content">
    <div id="div1">This is div one</div>
    <div id="div2">This is div two</div>
    <div id="div3">This is div three</div>
    <div id="div4">This is div four</div>
</div>

JS Fiddle demo (using a single a, and an 'empty' hash).

this is how i solve show hide problem with just

here is my div with its class declared

 <div class='loading'> </div>

and here is the javascript that

$('.loading').hide();

and

$('.loading').css("display", "block"); 

本文标签： javascriptShow Hide div with css onlyStack Overflow