title: Pure CSS collapse/expand div
body: <p>I have a pure CSS collapsable div which is based on someone else's code who uses the <code>:target</code> psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).</p>
  
  <p>I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.</p>
  
  <p>Here is my jfiddle: <a href="http://jsfiddle.net/dmarvs/94ukA/4/">http://jsfiddle.net/dmarvs/94ukA/4/</a></p>
  
  <pre><code>&lt;div class="FAQ"&gt;
      &lt;a href="#hide1" class="hide" id="hide1"&gt;+&lt;/a&gt;
      &lt;a href="#show1" class="show" id="show1"&gt;-&lt;/a&gt;
      &lt;div class="question"&gt; Question Question Question Question Question Question Question Question Question Question Question? &lt;/div&gt;
          &lt;div class="list"&gt;
              &lt;p&gt;Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer &lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
  
  .FAQ { 
      vertical-align: top; 
      height:auto !important; 
  }
  .list {
      display:none; 
      height:auto;
      margin:0;
      float: left;
  }
  .show {
      display: none; 
  }
  .hide:target + .show {
      display: inline; 
  }
  .hide:target {
      display: none; 
  }
  .hide:target ~ .list {
      display:inline; 
  }
  
  /*style the (+) and (-) */
  .hide, .show {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      font-size: 20px;
      color: #fff;
      text-shadow: 0 1px 0 #666;
      text-align: center;
      text-decoration: none;
      box-shadow: 1px 1px 2px #000;
      background: #cccbbb;
      opacity: .95;
      margin-right: 0;
      float: left;
      margin-bottom: 25px;
  }
  
  .hide:hover, .show:hover {
      color: #eee;
      text-shadow: 0 0 1px #666;
      text-decoration: none;
      box-shadow: 0 0 4px #222 inset;
      opacity: 1;
      margin-bottom: 25px;
  }
  
  .list p{
      height:auto;
      margin:0;
  }
  .question {
      float: left;
      height: auto;
      width: 90%;
      line-height: 20px;
      padding-left: 20px;
      margin-bottom: 25px;
      font-style: italic;
  }
  </code></pre>