Простой вертикальный CSS3 аккордеон

1. CSS

.accordion {
	background-color: #eee;
 	border: 1px solid #ccc;
	width: 600px;
	padding: 10px;
	margin: 50px auto;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 #999;
	-webkit-box-shadow: 0 1px 0 #999;
	box-shadow: 0 1px 0 #999;
	}
.accordion section {
 	border-bottom: 1px solid #ccc;
	margin: 5px;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(top, #fff, #eee);
	background-image:    -moz-linear-gradient(top, #fff, #eee);
	background-image:     -ms-linear-gradient(top, #fff, #eee);
	background-image:      -o-linear-gradient(top, #fff, #eee);
	background-image:         linear-gradient(top, #fff, #eee);
  	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.accordion h2, .accordion p {
	margin: 0;
	}
.accordion p {
	padding: 10px;
	}
.accordion h2 a {
	display: block;
	position: relative;
	font: 14px/1 'Trebuchet MS', 'Lucida Sans';
	padding: 10px;
	color: #333;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.accordion h2 a:hover {
	background: #fff;
	}
.accordion h2 + div {
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
	}
.accordion :target h2 a:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	}
.accordion :target h2 + div {
	height: 200px;
	}

2. HTML

<div class="accordion">
	<section id="one">
		<h2><a href="#one">Заголовок 1</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="two">
		<h2><a href="#two">Заголовок 2</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="three">
		<h2><a href="#three">Заголовок 3</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="four">
		<h2><a href="#four">Заголовок 4</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="five">
		<h2><a href="#five">Заголовок 5</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
</div>