Christopher Shaw

Software Developer

Accordion

A CSS Version of the jQuery Accordion

Find me on Github at https://github.com/christopher-paul-shaw/CSS-Accordion

Demo

Code

<style>
label.cs {
        background: #90C3D4;
        display: block;
        color: #fff;
	font-weight: bold;
        padding: 8px;
	margin: 4px;
}
input[name="control"].cs, .slide.cs {
  display: none;
}
input[name="control"]:checked.cs + .slide.cs {
  display: block;

}
.slide.cs {
  padding: 8px;
}

</style>

<label for="option1" class="cs">Tab 1</label>
<input type="radio" name="control" id="option1" checked class="cs"/>
<div class="slide cs">
  TEST CONTENT FOR SLIDE 1
</div>

<label for="option2" class="cs">Tab 2</label>
<input type="radio" name="control" id="option2" class="cs"/>
<div class="slide cs">
  TEST CONTENT FOR SLIDE 2
</div>

<label for="option3" class="cs">Tab 3</label>
<input type="radio" name="control" id="option3" class="cs"/>
<div class="slide cs">
  TEST CONTENT FOR SLIDE 3
</div>

<label for="option4" class="cs">Tab 4</label>
<input type="radio" name="control" id="option4" class="cs"/>
<div class="slide cs">
  TEST CONTENT FOR SLIDE 4
</div>