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:

  • Be backed by something.
  • Be keyboard navigable.
  • Retain state when focus is lost.
  • Only allow one item to be selected at a time.
  • Be Styled like a toggle.
Radio inputs and labels are perfect for this... 

		<input type="radio" name="accordianGroup1" id="rad1" checked="checked"/>
		<label for="rad1">Introduction</label>

Note:

  • The radio id and the label id match thus binding them together.
  • The first radio only is checked, as this is the default tab to show.
  • The radio name 'accordianGroup1', this allows only one item to be selected in a radio group at a time.

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;
		}


This source code is free and has no warranty.
Do whatever you want with it, except copy this tutorial to your website and say you wrote it!

Cheers, [email protected]

HTML:
			<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>

CSS:
			/* 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;
			}