jQueryで簡単シンプルアコーディオン – 初心者の私と学ぶjQuery

たまには本職的なエントリー。

自分のjQueryのスキル的には、ソースをコピーしてきてカスタマイズして使う程度。
さすがに基本くらいは覚えるかな、ということで最近ごにょごにょしているところ。
自分も初心者なので、トライしてできたものを復習を兼ねて紹介してみる。いい勉強になるかなと。

先日の案件で「アコーディオン」の実装が割と簡単にできたので、順を追ってご紹介。
骨組みだけなので、シンプルでわかりやすいと思うで！

デモはこちら

1.htmlを準備

[html]
<div class="slidebox">
この中身をスライドで表示したい。<br>
この中身をスライドで表示したい。<br>
この中身をスライドで表示したい。<br>
この中身をスライドで表示したい。<br>
</div>
<div class="btn">オープン</div>
[/html]

スライドさせたいエリアに”slidebox”というclassを付けておく。
スライドさせるためのテキストには”btn”というclassを付けておく。

2.決まりごとを記述

[html]
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(function(){
});
</script>
[/html]
jQueryを書くときの決まりごとをheadの中に記述。このまま覚えるべし！

3.スライドさせたい部分を隠す

[html highlight=”5″]
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(function(){
$(‘.slidebox’).hide();
});
</script>
[/html]
1.で、スライドさせたい部分に”slidebox”というclassを付けているので、その部分を.hideで隠す。

4.ボタンクリックの設定

[html highlight=”6,7″]
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(function(){
$(‘.slidebox’).hide();
$(‘.btn’).click(function(){
})
});
</script>
[/html]
“.btn”というclassがついた要素を、クリックで動作させる準備。
この段階では特になにもおこらない。

5.ボタンクリックでスライドさせる

[html highlight=”7″]
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(function(){
$(‘.slidebox’).hide();
$(‘.btn’).click(function(){
$(‘.slidebox’).slideToggle();
})
});
</script>
[/html]
“.slidebox”がついたエリアをスライドさせて表示する。.slideToggleはスライドさせるための命令。
これでスライドするようになった。以上で完成。

デモはこちら