695Multimedia/Accordion.html

## Accordion.html
<!DOCTYPE HTML>

<html>
<head>
	<title>Accordions?</title>
	<style>
ul.accordion{
	height: 100%;
	list-style: none;
	padding: 0;
}
ul.accordion li{
	padding: 5px;
}

/* Don't show the radio button. Use it's label for interactions. */
ul.accordion input{
	display: none;
}


/* the closed state of the item title */
ul.accordion input ~ label{
	background: #900;
	color: #fff;
	display: block;
	border-radius: 5px;
	padding: 5px 5px 5px 40px;
}

/* the open state of the item title */
ul.accordion input:checked ~ label{
	background: #090;
}

/* this is where the magic begins */
ul.accordion article{
	transition: height .3s;
	-webkit-transition: height .3s;
	-moz-transition: height .3s;
	-o-transition: height .3s;
	overflow: hidden;
}

/* closed state of the content */
ul.accordion input ~ article{
	height: 0;
}

/* opened state of the content */
ul.accordion input:checked ~ article{
	height: 300px;
}
	</style>
</head>
<body>
<ul class="accordion">
	<li>
		<input id="rd1" type="radio" name="accordion1" checked="checked"/><label for="rd1">Item 1</label>
		<article>
			<p>This is the text for Item 1</p>
		</article>
	</li>
	<li>
		<input id="rd2" type="radio" name="accordion1"/><label for="rd2">Item 2</label>
		<article>
			<p>This is the text for Item 2</p>
		</article>
	</li>
	<li>
		<input id="rd3" type="radio" name="accordion1"/><label for="rd3">Item 3</label>
		<article>
			<p>This is the text for Item 3</p>
		</article>
	</li>
	<li>
		<input id="rd4" type="radio" name="accordion1"/><label for="rd4">Item 4</label>
		<article>
			<p>This is the text for Item 4</p>
		</article>
	</li>
	<li>
		<input id="rd5" type="radio" name="accordion1"/><label for="rd5">Item 5</label>
		<article>
			<p>This is the text for Item 5</p>
		</article>
	</li>
</ul>
</body>
</html>
	<!DOCTYPE HTML>

	<html>
	<head>
	<title>Accordions?</title>
	<style>
	ul.accordion{
	height: 100%;
	list-style: none;
	padding: 0;
	}
	ul.accordion li{
	padding: 5px;
	}

	/* Don't show the radio button. Use it's label for interactions. */
	ul.accordion input{
	display: none;
	}


	/* the closed state of the item title */
	ul.accordion input ~ label{
	background: #900;
	color: #fff;
	display: block;
	border-radius: 5px;
	padding: 5px 5px 5px 40px;
	}

	/* the open state of the item title */
	ul.accordion input:checked ~ label{
	background: #090;
	}

	/* this is where the magic begins */
	ul.accordion article{
	transition: height .3s;
	-webkit-transition: height .3s;
	-moz-transition: height .3s;
	-o-transition: height .3s;
	overflow: hidden;
	}

	/* closed state of the content */
	ul.accordion input ~ article{
	height: 0;
	}

	/* opened state of the content */
	ul.accordion input:checked ~ article{
	height: 300px;
	}
	</style>
	</head>
	<body>
	<ul class="accordion">
	<li>
	<input id="rd1" type="radio" name="accordion1" checked="checked"/><label for="rd1">Item 1</label>
	<article>
	<p>This is the text for Item 1</p>
	</article>
	</li>
	<li>
	<input id="rd2" type="radio" name="accordion1"/><label for="rd2">Item 2</label>
	<article>
	<p>This is the text for Item 2</p>
	</article>
	</li>
	<li>
	<input id="rd3" type="radio" name="accordion1"/><label for="rd3">Item 3</label>
	<article>
	<p>This is the text for Item 3</p>
	</article>
	</li>
	<li>
	<input id="rd4" type="radio" name="accordion1"/><label for="rd4">Item 4</label>
	<article>
	<p>This is the text for Item 4</p>
	</article>
	</li>
	<li>
	<input id="rd5" type="radio" name="accordion1"/><label for="rd5">Item 5</label>
	<article>
	<p>This is the text for Item 5</p>
	</article>
	</li>
	</ul>
	</body>
	</html>