[CSS]デザインも美しい、アニメーションで開閉するアコーディオンを実装するチュートリアル

Post on:2011年6月3日

Pure CSS3 accordionの実装

HTML5への対応

HTML5（section要素）を使用するので、サポートしていない古いブラウザ用に準備します。

<script>document.createElement('section');</script>

参考：HTML5 Shiv

あとは、外部スクリプト「html5.js」を記述し、IEなどの古いブラウザでもHTML5のエレメントが利用できるようにします。

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

HTML

各パネルはsection要素で管理し、バーはh2要素、コンテンツはdiv要素で実装します。

<div class="accordion">

	<section id="one">
		<h2><a href="#one">Heading 1</a></h2>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
		</div>
	</section>

	<section id="two">...</div>
	<section id="three">...</div>
</div>

CSS

section{
	display: block;
}

.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: 100px;
}