<html>
<style type="text/css">
h3{
display: block !important;
}
h3:active{
display: block !important;
}
h3 span:before{
content: "[-]";
}
h3:active span:before{
content: "[+]";
}
div#summary:active > h3, h3:active ~ h4, h3:active ~ ul{
display: none;
}
</style>
<body>
<div id="summary">
<h3>Click to hide<span></span></h3>
<ul><li>first</li></ul>
<h4>title 1</h4>
<ul><li>second</li></ul>
<h4>title 2</h4>
<ul><li>third</li></ul>
<h4>title 3</h4>
<ul><li>fourth</li></ul>
</div>
</body>
</html>
Live demo: http://jsfiddle.net/BxrJz/
It works in chrome and firefox, but how do I get it to work in ie? Also, is there a way to make it stay in the hidden state until it is clicked again, so you don’t have to hold it?
Not without javascript… CSS responds to events. It cannot change the DOM state permanently.