CS
Menu
GitHub
CodePen
About
Articles
Christopher Shaw
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>
Copyright 2019 - Christopher Shaw