Ever wanted to have a Accordian without having to use a pile of Javascript?
Well this Accordian is pure CSS, and can be used via keyboard or mouse.
It is known to be compatible with IE9, Firfox 3.6+, Opera 11, Chrome and Safari.
First off the toggle needs to:
<input type="radio" name="accordianGroup1" id="rad1" checked="checked"/> <label for="rad1">Introduction</label>
Note:
Doesn't this leave an ugly radio on the screen?
Yes, so why not just move it off-screen...
.tabGroup > input[type="radio"] { position: absolute; left:-100px; top:-100px; }
Now we need a content pane.
This is just a basic div.
<div >Some content</div>
We add the following CSS to hide/show it when the associated radio is selected.
.tabGroup > div { display: none; } .accordianGroup > input[type="radio"]:checked + label + br + div { display: block; }
<div class="accordianGroup"> <input type="radio" name="accordianGroup1" id="rad1" checked="checked"/> <label for="rad1">Toggle 1</label><br/> <div>Toggle 1 content</div> <input type="radio" name="accordianGroup1" id="rad2"/> <label for="rad2">Toggle 2</label><br/> <div>Toggle 2 content</div> <input type="radio" name="accordianGroup1" id="rad3"/> <label for="rad3">Toggle 3</label><br/> <div>Toggle 3 content</div> </div>
/* webkit has a bug with its pseudo selectors, this works around it */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* Set the size and font of the accordian widget */ .accordianGroup { font: 10pt arial, verdana; width: 800px; height: 400px; } /* Configure the radio buttons to hide off screen */ .accordianGroup > input[type="radio"] { position: absolute; left:-100px; top:-100px; } /* Configure labels to cover their radio inputs */ .accordianGroup > input[type="radio"] + label { /* inline-block such that the label can be given dimensions */ display: inline-block; /* label fills widget width */ width: 100%; /* A nice curved border around the toggle */ border: 1px solid black; border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; /* Padding around toggle text */ padding: 5px 10px; /* Set the background color to default gray (non-selected toggle) */ background-color:#ddd; } /* Focused toggle need to be highlighted as such */ .accordianGroup > input[type="radio"]:focus + label { border:1px dashed black; } /* Checked toggle must be white with the bottom border removed */ .accordianGroup > input[type="radio"]:checked + label { background-color:white; font-weight: bold; border-bottom: 1px solid white; margin-bottom: -1px; } /* The toggle content must fill the widgets size and have a nice border */ .accordianGroup > div { display: none; border: 1px solid black; background-color: white; padding: 10px 10px; height: 100%; width: 100%; overflow: auto; box-shadow: 0 0 20px #444; -moz-box-shadow: 0 0 20px #444; -webkit-box-shadow: 0 0 20px #444; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } /* This matchs toggles displaying to thier associated radio inputs */ .accordianGroup > input[type="radio"]:checked + label + br + div { display: block; }