HTML
<h2>Pure CSS Accordion Using Radio Buttons</h2>
<ul id="accordion">
<li>
<label for="first">Fist Title</label>
<input type="radio" name="accordion" id="first" checked>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet hendrerit venenatis. Etiam a mauris vitae risus suscipit varius quis vitae purus. Nullam nisl tellus, porttitor ac fringilla vitae, congue eget felis. Vivamus dolor orci, laoreet non ullamcorper vitae, aliquam ac enim. Aliquam varius eu erat sed ultricies. Sed aliquet purus id gravida interdum. Vivamus vulputate accumsan felis, lacinia sollicitudin purus sodales in. Maecenas ut scelerisque lorem. Integer semper nunc in nunc porttitor, vel dictum est vehicula. Donec nec semper urna. Mauris ultricies tristique eros, eget vehicula tellus viverra sit amet. Phasellus vel nulla lacus. Proin et tortor vestibulum, dictum nisi at, blandit magna. Aliquam in tincidunt libero. Aliquam vitae convallis lectus, sed interdum nulla.</p>
</div>
</li>
<li>
<label for="second">Second Title</label>
<input type="radio" name="accordion" id="second">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet hendrerit venenatis. Etiam a mauris vitae risus suscipit varius quis vitae purus. Nullam nisl tellus, porttitor ac fringilla vitae, congue eget felis. Vivamus dolor orci, laoreet non ullamcorper vitae, aliquam ac enim. Aliquam varius eu erat sed ultricies. Sed aliquet purus id gravida interdum. Vivamus vulputate accumsan felis, lacinia sollicitudin purus sodales in. Maecenas ut scelerisque lorem. Integer semper nunc in nunc porttitor, vel dictum est vehicula. Donec nec semper urna. Mauris ultricies tristique eros, eget vehicula tellus viverra sit amet. Phasellus vel nulla lacus. Proin et tortor vestibulum, dictum nisi at, blandit magna. Aliquam in tincidunt libero. Aliquam vitae convallis lectus, sed interdum nulla.</p>
</div>
</li>
<li>
<label for="third">Third Title</label>
<input type="radio" name="accordion" id="third">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet hendrerit venenatis. Etiam a mauris vitae risus suscipit varius quis vitae purus. Nullam nisl tellus, porttitor ac fringilla vitae, congue eget felis. Vivamus dolor orci, laoreet non ullamcorper vitae, aliquam ac enim. Aliquam varius eu erat sed ultricies. Sed aliquet purus id gravida interdum. Vivamus vulputate accumsan felis, lacinia sollicitudin purus sodales in. Maecenas ut scelerisque lorem. Integer semper nunc in nunc porttitor, vel dictum est vehicula. Donec nec semper urna. Mauris ultricies tristique eros, eget vehicula tellus viverra sit amet. Phasellus vel nulla lacus. Proin et tortor vestibulum, dictum nisi at, blandit magna. Aliquam in tincidunt libero. Aliquam vitae convallis lectus, sed interdum nulla.</p>
</div>
</li>
</ul>
CSS
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
p {
margin:0;
padding:0;
}
h2 {
font-size:40px;
margin:40px auto;
font-family: 'Bree Serif', 'serif';
text-align:center;
}
#accordion {
margin:50px auto;
padding:0;
width:500px;
}
#accordion li {
list-style:none;
width:100%;
}
#accordion li label {
padding:10px;
display:block;
font-family: 'Bree Serif', 'serif';
font-size:30px;
line-height:30px;
color:#FFFFFF;
background-color:#3498db;
border-bottom: solid 8px #2980b9;
}
/* Hide the radio buttons */
#accordion label + input[type='radio'] {
display: none;
}
/* hide content by default */
#accordion .content {
display:none;
padding:10px;
font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size:19px;
line-height:26px;
}
/* Show content boxes when the radio buttons are checked */
#accordion label + input[type='radio']:checked + .content {
display:block;
}
1 Response