After stumbling upon a fiddle example that utilizes :hover as a selector to hide a div until a certain area is moused over, I've been searching for a way to change it to trigger on a click instead. Anyone have any suggestions?
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;
}