title: Expandable table of contents with buttons
body: <p>I seek to design an expandable table of contents. The following CSS + HTML displays hidden list items upon clicking a text portion:</p>
  
  <p>CSS:</p>
  
  <pre><code>#droplist, .show {display: none; }  
  .hide:focus + .show {display: inline; }
  .hide:focus { display: none; }
  .hide:focus ~ #droplist { display:block; }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="padding-left:40px"&gt;
  &lt;a href="#"&gt;1. Stuff&lt;/a&gt;&lt;a href="#" class="hide"&gt; [+]&lt;/a&gt; &lt;a href="#" class="show"&gt;[-]&lt;/a&gt;
      &lt;ul id="droplist" style="margin-top: 4px"&gt;
          &lt;li&gt;&lt;a href="#"&gt;1.1 Object 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Lnk"&gt;1.2 Object 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This list, however, is limited to a single nest; if I were to expand further from Object 2, I'd need to add additional paddings. </p>
  
  <p>The code below fails to summon the dropdown:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;1. Stuff&lt;/a&gt;&lt;a href="#" class="hide"&gt; [+]&lt;/a&gt; &lt;a href="#" class="show"&gt;[-]&lt;/a&gt;&lt;/li&gt;
      &lt;ul id="droplist" style="margin-top: 4px"&gt;
          &lt;li&gt;&lt;a href="#"&gt;1.1 Object 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Lnk"&gt;1.2 Object 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How do I maintain a list format while keeping the 'button' functional? JSFiddle: <a href="http://jsfiddle.net/N79nP/463/" rel="nofollow noreferrer">http://jsfiddle.net/N79nP/463/</a></p>
  
  <p>Help is appreciated.</p>