簡単実装！シンプルなアコーディオンメニュー「Accordion」
当ページのリンクには広告が含まれています。
スポンサーリンク
シンプルなアコーディオンメニューを簡単に実装することができるプラグイン「Accordion」を紹介します。
jQueryプラグイン「Accordion」
このプラグインを使えば、リストタグ（li）を使ったシンプルなアコーディオンメニューを実装することができます。
アコーディオンメニューはタイトルをクリックするとアニメーション効果付きでコンテンツが表示されます。
オプションではアニメーションの速度などを指定することができるので、簡単にカスタマイズすることができます。
スポンサーリンク
デモのアコーディオンメニューをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Acccordionのデモでーす。">
<title>Acccordion - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<ul id='accordion'>
<li>
<div class='topWrap clearfix'>
<span>たいとるだよ 1</span>
</div>
<div class='details'>
<span>あ<br />い<br />う<br />え<br />お</span>
</div>
</li>
<li>
<div class='topWrap clearfix'>
<span>たいとるだよ 2</span>
</div>
<div class='details'>
<span>か<br />き<br />く<br />け<br />こ</span>
</div>
</li>
<li>
<div class='topWrap clearfix'>
<span>たいとるだよ 3</span>
</div>
<div class='details'>
<span>さ<br />し<br />す<br />せ<br />そ</span>
</div>
</li>
<li>
<div class='topWrap clearfix'>
<span>たいとるだよ 4</span>
</div>
<div class='details'>
<span>た<br />ち<br />つ<br />て<br />と</span>
</div>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/accordion.js"></script>
<script>
$(document).ready(function(){
$("#accordion").accordion({
tabClick: ".topWrap",
tabContent: ".details",
accordAnimation: "2000",
bodyAnimation: "2000",
spaceTop: "200"
});
});
</script>
</body>
</html>
スポンサーリンク