title: How to set a details element to OPEN by default or via CSS
body: <p>HTML5 adds two new elements that are useful for marking up a table of contents for an article: <strong><em>details</em></strong> and <strong><em>summary</em></strong>.</p>
  
  <p>The details element defaults to closed (hides everything except the summary element) and when clicked, it expands to reveal its contents. When it does this, it adds an "open" attribute to the details element.</p>
  
  <p>I would like the element to default to open without having to add the open attribute to the markup. Is it possible to do this via CSS or would scripting have to come into play?</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;details&gt;
  &lt;summary&gt;Table of Contents&lt;/summary&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" class="active"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/2/"&gt;Body&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/3/"&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/details&gt;
  </code></pre>