CSS Click Events

Question

So I found a fiddle example using :hover as a selector to hide a div tag until something is moused over a selected area. I have been doing some research but to no avail, how would I change :hover to something that would be more of a "onclick"

http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML

<div id="button"><h3>button</h3>
    <div id="two">Hovered content</div>
</div>

CSS

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    width:98px;
    height: 0;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease;
}
#button:hover > #two {
    display:block;
    left:0px;
    height:100px;
}

Answer 1

:active means “while this element is activated”. One condition for that is a mouse click, but it’s generally while the mouse button is depressed; it’s not persistent.

If you need persistence, you’ll be able to use a <details> element eventually; in the meantime, a hidden checkbox combined with a <label> and a selector along the lines of :checked + .something is common. You might consider just using JavaScript at that point, too.

Remember to respect keyboard focus, by the way.