Show Hide div with css only

Question

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>

Answer 1

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/