How to Toggle CSS3 Accordion on Click

Question

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.

My CSS

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    height: 300px;
}

.horizontalaccordion>ul>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>ul>li>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 & 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>ul>li>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>ul>li:hover {
    overflow: hidden;
    width: 380px;
}

.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}

.horizontalaccordion:hover>ul>li:hover>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>ul>li>h3:hover {
    cursor:pointer;
}

My HTML

<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a>
            </center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a>
        </center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a></center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
        <a href="#">Link</a> </center></div>
    </li>
</ul>
</div>

If anyone can help me flip this thing on it's side, I'd appreciate it.

Answer 1

you can use this code:

DEMO

No change need in HTML and here is CSS:

h3, ul, html, body{
    margin:0;
    padding:0;
    list-style:none;
}
h3{
    background:blue;
    color:#fff;
    padding:10px;
    border:1px solid darkblue;
}
li div{
    padding:0;
    height:0;
    background:#eee;
    overflow:hidden;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
li h3:hover + div, li div:hover{
    height:100px;
}

Answer 2

Click - toggle animate accordion (without JS)

.ulAcc{
  width:300px;
  list-style:none;
  padding:0;
  margin:0;
}
.ulAcc li > label + input{
  display:none;
}
.ulAcc li > label{
  display:block;
  text-transform:uppercase;
  color:#fff;
  padding:10px;
  background:  #0022cc;
  background: -moz-linear-gradient( top, #002299, #0022cc);
  background: -webkit-gradient(linear, left top, left bottom, from(#001199), to(#0011cc));
}
.ulAcc li > div{
  overflow:hidden;
  height:0px;
  background:#ccc;
  transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
}
.ulAcc li > label + input:checked + div{
  height:300px;
}

<ul class="ulAcc">
      <li>
          <label for="a1">HEADER</label><input id="a1" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a2">HEADER</label><input id="a2" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a3">HEADER</label><input id="a3" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a4">HEADER</label><input id="a4" type="radio" name="toggle">
          <div>Content</div>
      </li>
</ul>