スマートフォンなどでよくあるアコーディオンメニュー。
すごく簡単なコードで実装する事ができます。
これから紹介する3つのステップで簡単に実装してしまいましょう。
STEP1 jQueryライブラリを読み込む
まずSTEP1はjQueryライブラリを読み込みましょう。
jQueryサイトからダウンロードしてサーバーにアップするのもいいですが、サイトの高速化等を考慮してCDNを利用した読み込みで下記のコードでjQueryを読み込みましょう。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" ></script>
jQueryをダウンロードして・・・と面倒な事はせず、上記の1行で簡単に読み込みましょう。
STEP2 HTMLとCSSを用意
STEP2ではベースとなるHTMLコードとCSSコードを用意します。
下記の様に簡単に用意できます。
先ずはHTMLコード
<sectino>
<h1>アコーディオンメニューを実装します。</h1>
<article class="accordion">
<h2>メニュー1</h2>
<div>
<h3>アコーディオンメニュー1の内容です。<;/h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</article>
<article class="accordion">
<h2>メニュー2</h2>
<div>
<h3>アコーディオンメニュー2の内容です。</h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</article>
<article class="accordion">
<h2>メニュー3</h2>
<div>
<h3>アコーディオンメニュー3の内容です。</h3>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</article>
</sectino>
次はCSSコードです。
.accordion h2{
padding: 5px 10px;
margin: 0;
text-align: left;
background: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.accordion > div{
display: none;
padding: 10px;
margin: 0;
background: #fff;
text-align: left;
}
これでHTMLとCSSの準備は完了です。
STEP3 jQueryを使った簡単なJavascriptコードを記述
STEP1で読み込んだjQueryを使うとJavascriptコードを簡単に記述する事ができます。
使うといっても、Javascriptの記述方法をjQueryライブラリを利用した記述方法に変えるだけなので、難しい事はまったくありません。
下記の様に書きましょう。
<script>
$(function(){
$('.accordion h2').click(function(){
$(this).next('div').stop().slideToggle(200);
});
});
</script>
たったこれだけです。
すごく簡単じゃないですか？
たったこれだけでアコーディオンメニューが実装できてしまいます。
今回紹介したコードをカスタマイズしてみなさんもアコーディオンメニューを試してみてください。
紹介したコードを記述したサンプル
メニュー1
アコーディオンメニュー1の内容です。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
メニュー2
アコーディオンメニュー2の内容です。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
メニュー3
アコーディオンメニュー3の内容です。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。