title: HTML-Pure html accordion collapse others
body: <p>I need a negation pseudo-class to collapse the expanded content when .content [type=checkbox]:checked. How to say collapse all lists except clicked? Is it possible without javascript?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="accordion vertical"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;input type="checkbox" id="checkbox-1" name="checkbox-accordion" /&gt;
              &lt;label for="checkbox-1"&gt;Title&amp;nbsp;One&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;h3&gt;&lt;/h3&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="checkbox" id="checkbox-2" name="checkbox-accordion" /&gt;
              &lt;label for="checkbox-2"&gt;Title&amp;nbsp;Two&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;h3&gt;&lt;/h3&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="checkbox" id="checkbox-3" name="checkbox-accordion" /&gt;
              &lt;label for="checkbox-3"&gt;Title&amp;nbsp;Three&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;h3&gt;&lt;/h3&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;input type="checkbox" id="checkbox-4" name="checkbox-accordion" /&gt;
              &lt;label for="checkbox-4"&gt;Title&amp;nbsp;Four&lt;/label&gt;
              &lt;div class="content"&gt;
                  &lt;h3&gt;&lt;/h3&gt;
                  &lt;p&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.accordion {
      font-family:Arial, Helvetica, sans-serif; 
      margin:0 auto;
      font-size:14px;
      border:1px solid #542437;
      border-radius:10px;
      width:600px;
      padding:10px;
      background:#fff;
  }
  .accordion ul {
      list-style:none;
      margin:0;
      padding:0;    
  }
  .accordion li {
      margin:0;
      padding:0;
  }
  .accordion [type=radio], .accordion [type=checkbox] {
      display:none;
  }
  .accordion label {
      display:block;
      font-size:16px;
      line-height:16px;
      background:#D95B43;
      border:1px solid #542437;
      color:#542437;
      text-shadow:1px 1px 1px rgba(255,255,255,0.3);
      font-weight:700;
      cursor:pointer;
      text-transform:uppercase;
  }
  .accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
      background:#C02942;
      color:#FFF;
      text-shadow:1px 1px 1px rgba(0,0,0,0.5)
  }
  .accordion .content {
      padding:0 10px;
      overflow:hidden;
      border:1px solid #fff;
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
  }
  .accordion p {
      color:#333;
      margin:0 0 10px;
  }
  .accordion h3 {
      color:#542437;
      padding:0;
      margin:10px 0;
  }
  .vertical ul li {
      overflow:hidden;
      margin:0 0 1px;
  }
  .vertical ul li label {
      padding:10px;
  }
  .vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
      border-bottom:0;
  }
  .vertical ul li label:hover {
      border:1px solid #542437;
  }
  .vertical ul li .content {
      height:0px;
      border-top:0;
      transition: all .5s ease-out;
  }
  .vertical [type=checkbox]:checked ~ label ~ .content {
      height:300px;
      border:1px solid #542437;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Yn4LS/" rel="nofollow">http://jsfiddle.net/Yn4LS/</a></p>