CSS3 accordion

Jquery 2.0.2 Bootstrap 3.x FontAwesome 3.2.1

by Plippie Plop

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="css3-acc">
 <input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />
  
<label>
  <input class="inner" type="radio" name="ccs3-acc-grp" />
  <h3>Item 1</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>
  
<label>
  <input class="inner" type="radio" name="ccs3-acc-grp"/>
  <h3>Item 2</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>

<label>
  <input class="inner" type="radio" name="ccs3-acc-grp"/>
  <h3>Item 3</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>
  
<label>
  <input class="inner" type="radio" name="ccs3-acc-grp"/>
  <h3>Item 4</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>

</div>

CSS

body {
  background: #eee;
}


/* css3 accordion */
.css3-acc {
  background: #158;
  width: 250px;
  margin: 40px auto;
  color: white;
  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
    border-radius:6px;
}

/* internal reset 
    for use with other frameworks
    like bootstrap
*/
.css3-acc ul,
.css3-acc li,
.css3-acc label,
.css3-acc a,
.css3-acc h3{
    margin:0;
    padding:0;
    border:0; 
    display:block;
}

.css3-acc input {
  position: absolute; 
}

.css3-acc label {
  overflow: hidden;
  position: relative;
  
}

.css3-acc label:nth-child(2) {
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
}
.css3-acc label:last-child{
   border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px;
}

.css3-acc label h3 { 
  font-size: 18px;
  line-height: 34px;
  padding: 0 10px;  
  cursor: pointer;
  background: #245;
  border-bottom: 1px solid #fff;
  position: relative;
  z-index: 2;   
}

.css3-acc label:last-child h3 {
  border-bottom: none;  
}
.css3-acc [for="css3-acc-def"] {
  position: absolute;
  z-index: 1;
 border:0 !important;
  width: 100%;
  height: 40px;
  top: 0;
  left: 0;

  
}
.css3-acc ul {  
  max-height: 0px;
  transition: max-height 0.5s;
  overflow: hidden;
}
.css3-acc ul li {
  list-style-type: none;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.css3-acc ul li a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  line-height: 27px;
   padding: 0 15px;
}
.css3-acc ul li a:hover {
  background: #046;
}
.css3-acc .inner[name="ccs3-acc-grp"]:checked ~ ul {
    max-height: 400px;
     transition: max-height 1s;
}
.css3-acc .inner[name="ccs3-acc-grp"]:checked ~ label {
  z-index: 3;
}