【jQuery-30】クリックで開閉するアコーディオン【実践編】

今回は、クリックをすると開閉するアコーディオンを実装してみましょう。

基本的なメソッドばかりですが、うまく組み合わせることによってこのような動きも可能になります。

親要素、子要素の概念を意識しながら、一歩ずつ進めていきましょう。

HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。

HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】   

展開と折り畳みができるアコーディオンパネル

完成形はこんな感じになります

See the Pen accordion by taichi (@taichi_na) on CodePen.

まずは動作を確認しましょう。４まであるそれぞれのパネルは <dl> で作られています。デフォルトの状態では、１の <dt> と <dd> が展開されていますね。

そしてマウスオンしたときに、<dt> の背景色が変わり、クリックをすると左に移動する形で展開をします。展開をすると左に移動すること、そして各タイトル（1, 2, 3, 4）は常に見えている状態であることは要チェックです。

HTML, CSSでコンテンツを配置する

See the Pen accordion by taichi (@taichi_na) on CodePen.

上のコードペンで、一度 jQuery をすべてコメントアウトして無効にしてみてください。そうすると、すべての <dt> <dd> が見えている状態になると思います。<main> の幅に収まらない分は改行されてしまうので表示が崩れていますね。

なのでどれか一つの<dd>だけが常に見えているようにする必要があります。これは jQuery で処理を行います。

そのほか、特に難しい部分はないと思います。要素を横並びにする方法はいくつかありますが、ここでは float: left を使っています。

jQuery で要素の開閉を実装する

See the Pen accordion by taichi (@taichi_na) on CodePen.

1. $('dd[id != "acd1"]').css("width", "0px");

id="acd1" 以外の要素の width を 0px にします。

これでデフォルトの状態で <dd> は最初の一つだけが表示されていることになります。

2. $("a").click(function(){

a をクリックしたときに、関数内の処理を実行します。

3. if(!$(this).hasClass("currentBtn")){

if文を使っています。初めについている ! は論理演算子で否定を意味します。ここでは「クリックされた a が currentBtn クラスをもっていなかった場合」という条件を意味しています。

4. $(".current").animate({"width" : "0px"}, 300);

current クラス（今表示している dd 。デフォルトだと acd1 ）の width を0にします。

5. $($(this).attr("href")).animate({"width" : "240px"}, 300);

クリックされた a の href 属性を取得します。この値は各 <dd> の id と同じにしているので、クリックされた <dt> の次にある <dd> が展開される（width を 240px にする）ということです。

6. $("dd").removeClass();

<dd> についているクラスを削除します。これはすべての dd に対して有効です。

7. $($(this).attr("href")).addClass("current");

展開した dd にクラス current を付けます。

8. $("a").removeClass();

a に付いているクラスを削除します。

9. $(this).addClass("currentBtn");

クリックされた a にクラス currentBtn を追加します。

これで終わりです。最後に忘れずに return false を付けましょう。

途中で current クラスを消して、展開した dd に新たに current クラスを付与しましたが、これは次にクリックされたときに、その時に展開している要素を閉じるためですね。

まとめ：要素の開閉を実装しました

See the Pen accordion by taichi (@taichi_na) on CodePen.

クラスを移動したり、指定した要素を消したり表示したりしてアコーディオンを実装しました。今回は少し長く複雑なスクリプトでしたが、一つずつ理解しながら進めれば、必ず理解できる内容です。

プログラミングとしてはもっとも敷居が低い jQuery ですが、プログラミングの考え方の基礎を理解するためにはうってつけのライブラリです。勉強を続けましょう！！