title: How to Toggle CSS3 Accordion on Click
body: <p>I have an accordion file that a friend gave me. It is exactly what I asked for, an accordion with gradient title bars that does not use javascript. I failed to mention that I needed the accordion to open vertically and not horizontally, and that I wanted it to open on click not hover. He is a knowledgeable friend, but wasn't sure how to achieve this. </p>
  
  <p>My CSS</p>
  
  <pre><code>.horizontalaccordion&gt;ul {
      margin: 0;
      padding: 0;
      list-style:none;
      height: 300px;
  }
  
  .horizontalaccordion&gt;ul&gt;li {
      display:block;
      overflow: hidden;
      float:left;
      margin: 0;
      padding: 0;
      list-style:none;
      width:40px;
      height: 300px;
  
      /* Decorative CSS */
      background:#f0f0f0;
  
      /* CSS3 Transitions */
      transition: width 0.3s ease-in-out;
      -moz-transition: width 0.3s ease-in-out;
      -webkit-transition: width 0.3s ease-in-out;
      -o-transition: width 0.3s ease-in-out;
  }
  
  .horizontalaccordion&gt;ul&gt;li&gt;h3 {
      display:block;
      float:left;
      margin: 0;
      padding:10px;
      height:19px;
      width:280px;
  
      /* Decorative CSS */
      border-left:#f0f0f0 1px solid;
      font-family: Arial, Helvetica, sans-serif;
      text-decoration:none;
      text-transform:uppercase;
      color: #fff;
      background:#cccccc;
  
      /* CSS3 Transform Rotate &amp; Translate */
      white-space:nowrap;
      -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
      -moz-transform-origin: 0 100%;
      -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
      -o-transform-origin: 0 100%;
      -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
      -webkit-transform-origin: 0 100%;
      transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
      transform-origin: 0 100%;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
              progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002299, endColorstr=#ff0022cc);  /* IE6,IE7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                  "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002299, endColorstr=#ff0022cc)"; /* IE8 */
  
      /* CSS3 Gradient Effect */
      background: -moz-linear-gradient( top, #002299, #0022cc);
      background: -webkit-gradient(linear, left top, left bottom, from(#001199), to(#0011cc));
  }
  
  .horizontalaccordion&gt;ul&gt;li&gt;div {
      display:none;
      float:left;
      overflow: auto;
      position:relative;
      top:-40px;
      left:40px;
      *top:0px;       /* IE7 Hack */
      *left:0px;      /* IE7 Hack */
      margin:0;
      width:320px;
      height:280px;
      padding:10px;
  }
  
  .horizontalaccordion&gt;ul&gt;li:hover {
      overflow: hidden;
      width: 380px;
  }
  
  .horizontalaccordion:hover&gt;ul&gt;li:hover&gt;div {
      display:block;
  }
  
  .horizontalaccordion:hover&gt;ul&gt;li:hover&gt;h3 {
      /* Decorative CSS */
      color:#fff;
      background:#000000;
  
      /* CSS3 Gradient Effect */
      background: -moz-linear-gradient( top, #000090, #000022); /* FF, Flock */
      background: -webkit-gradient(linear, left top, left bottom, from(#000090), to(#000022)); /* Safari, Chrome */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
              progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000090, endColorstr=#ff000022); /* IE 5.5 - IE 7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                  "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000090, endColorstr=#ff000022)";   /* IE 8 */
  }
  
  .horizontalaccordion&gt;ul&gt;li&gt;h3:hover {
      cursor:pointer;
  }
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="horizontalaccordion"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;div&gt;
              Content
              &lt;br /&gt;&lt;center&gt;
  &lt;a href="#"&gt;Link&lt;/a&gt;
              &lt;/center&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;div&gt;
              Content
              &lt;br /&gt;&lt;center&gt;
  &lt;a href="#"&gt;Link&lt;/a&gt;
          &lt;/center&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;div&gt;
              Content
              &lt;br /&gt;&lt;center&gt;
  &lt;a href="#"&gt;Link&lt;/a&gt;&lt;/center&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;div&gt;
              Content
              &lt;br /&gt;&lt;center&gt;
          &lt;a href="#"&gt;Link&lt;/a&gt; &lt;/center&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If anyone can help me flip this thing on it's side, I'd appreciate it.</p>