Раскрывающиеся блоки с скрытым содержанием - вариант №3

Пример создания переключателя раскрывающихся блоков с скрытым содержанием используя исключительно свойства CSS3. (radio buttons)

by Andrey Dobrovoi

HTML

<section class="container">
				<div>
					<input id="ac-1" name="toggle-box" type="checkbox">
          Когда я вернулся в комнату, кирпичики и соляные пирамидки были уже переложены на подоконник и Николай крылышком сметал песок...
          <article>и сонных мух в растворенное окно. Свежий пахучий воздух уже проник в комнату и наполнял ее. Из окна слышался городской шум и чиликанье воробьев в палисаднике.
          <p>Все предметы были освещены ярко, комната повеселела, легкий весенний ветерок шевелил листы моей «Алгебры» и волоса на голове Николая. Я подошел к окну, сел на него, перегнулся в палисадник и задумался.</p>
					</article> <label for="ac-1">Развернуть/свернуть текст >></label>
				</div>
			</section>

CSS

.container{
	margin: 0 auto;
  max-width: 860px;
  padding: 20px;
  font-family: helvetica, arial;
  line-height: 1.3em;
}
.container label{
	padding: 5px 0;
	position: relative;
	display: block;
	cursor: pointer;
	color: #008424;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}
.container input{
	display: none;
}
.container article {
	overflow: hidden;
	height: 0px;
}
.container input:checked ~ article {
	height: auto;
}