【簡単シンプル】プラグインを使わずにクリックで展開するアコーディオンの作り方

更新日：2016年4月6日

使い所の多すぎるアコーディオンメニュー。作り方を調べてみたら、意外と難しそうで読むのを途中で辞めちゃったなんて方も少なくないのではないでしょうか？
プラグインを読み込んでたり、異様に長いソースだったり……読むのを辞めちゃう気持ちもよく分かります。

でも当サイトの作り方は超簡単で、単純明快です。画像なんて使いませんし、プラグインなんて勿論使いませんので、最後まで読んで貰えたら幸いです。

ちなみに完成すると下記のようなアコーディオンが出来上がります。

それではどのように実装するかというと、まずHTMLは

■クリックすると展開されます！
	

	
テキストテキストテキスト

	テキストテキストテキスト

	テキストテキストテキスト

	テキストテキストテキスト
	

と記述します。
なんてことない非常に平凡なHTMLですね。

次にCSSには

.accordion {
	background-color: #E1F9E8;
}

.accordion_switch_color {
	position: relative;
	cursor: pointer;
	color: #FFF;
	background-color: #02A03A;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding: 5px 0 5px 5px;
}

.accordion_switch_color:before {
	position: absolute;
	display: block;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	background-color: #FFF;
	margin-top: -8px;
}

.accordion_switch_color:after {
	position: absolute;
	display: block;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	background-color: #02A03A;
	margin-top: -13px;
}

.accordion_kakunou_color {
	font-size: 14px;
	background-color: #E1F9E8;
	margin: 5px 0 20px 27px;
	padding-bottom: 3px;
}

.accordion_switch_color.open:before {
	position: absolute;
	display: block;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	background-color: #FFF;
	margin-top: -4px;
}

.accordion_switch_color.open:after {
	position: absolute;
	display: block;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	background-color: #02A03A;
	margin-top: 1px;
}

と記述。
ごちゃごちゃと一見難しいことを書いているように見えますが、大方は三角矢印をCSSで表現する為の記述です。
深く考えずにコピペして貰って結構です。

最後にjQueryには

$(function() {
	$('.accordion_kakunou').hide();
	$('.accordion_switch').click(function() {
		$('.accordion_switch').toggleClass("open").next().slideToggle(400);
	});
});

とだけ記述すれば、もう完成です。

クリックすると開閉を繰り返すアコーディオンが瞬く間に完成しました。

あとはお好みで、色なり大きさなりをカスタマイズすれば思い通りのものが出来上がるかと思います。
ちなみにslideToggle(400)の、この400という数値を書き換えれば開閉時のスピードを変更することが出来ます。

アコーディオンはメニュー以外にも、クイズに使えたり、Q&Aにも使えたりと汎用性が高いです。これ1つ知っているだけで本当に色んなことが出来ます。
是非ご活用下さい。