title: CSS trick in place of javascript... almost working
body: <pre><code>    &lt;html&gt;
      &lt;style type="text/css"&gt;
      h3{
          display: block !important;
      }
      h3:active{
          display: block !important;
      }
      h3 span:before{
          content: "[-]";
      }
      h3:active span:before{
          content: "[+]";
      }
      div#summary:active &gt;  h3, h3:active ~ h4, h3:active ~ ul{
          display: none;
      }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;div id="summary"&gt;
      &lt;h3&gt;Click to hide&lt;span&gt;&lt;/span&gt;&lt;/h3&gt;
      &lt;ul&gt;&lt;li&gt;first&lt;/li&gt;&lt;/ul&gt;
      &lt;h4&gt;title 1&lt;/h4&gt;
      &lt;ul&gt;&lt;li&gt;second&lt;/li&gt;&lt;/ul&gt;
      &lt;h4&gt;title 2&lt;/h4&gt;
      &lt;ul&gt;&lt;li&gt;third&lt;/li&gt;&lt;/ul&gt;
      &lt;h4&gt;title 3&lt;/h4&gt;
      &lt;ul&gt;&lt;li&gt;fourth&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><em><strong>Live demo:</em></strong> <a href="http://jsfiddle.net/BxrJz/" rel="nofollow">http://jsfiddle.net/BxrJz/</a></p>
  
  <p>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?</p>