CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 268   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

6

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

Jemand 29419 ,
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>

Рекламная пауза

» 6 комментариев

  1. А как сделать, чтобы при нажатии на стрелку открытая часть закрывалась?

  2. Подскажите, пожалуйста. У меня сайт на joomla. Там почему то, section не читается. Попробовала заменить на div с другим id но не могу понять как изменить код css


Оставить комментарий