66.アコーディオンを作ろう　～slideToggleと相対的な要素指定を使う～

今日はアコーディオンについて。

特に相対的な要素の指定方法を初めて知ったので

そこはガッツリ確認したいと思います。

アコーディオンって？

楽器…ではありません。

ただ、アコーディオンは開いたり閉じたりしながら音を出しますよね。

それが由来のようです。

webのアコーディオンはアコーディオンメニューとも呼ばれ、

最初は閉じていて、クリックすると隠れていた部分が表示されるそんなメニューや画面のことです。

どうやって作るのか

manablo.hatenablog.jp

実は以前の記事で使ったslideToggleで実装できます。

以下のように、Q＆Aを作る時などに重宝します。

HTMLのコード

<div class="qa__item accordion">
<dt class="accordion__head">クリックするとどうなりますか？<span class="accordion__icon"></span></dt>
<dd class="accordion__body">
<div class="accordion__body-in">アコーディオンでここが開きます。
　　～～～～
　　</div>
</dd>
</div>

questionの部分に.accordion__headクラスを適用して、jQueryでクリックを検知して動作させます。

jQueryのコード

$('.accordion__head').click(function() {
$(this).next().slideToggle();
$(this).children('.accordion__icon').toggleClass( 'is-open' );
});

クラス属性が.accordion__headの要素がクリックされたら、

$(this).next().slideToggle();が実行され、表示されます。

.next()は次の兄弟要素を指定します。この.next()や.children()を使うと相対的な要素指定ができます。

兄弟要素は同じ階層のタグとイメージしてもらえれば良いと思います。

例えば、

というHTMLがあったら、

divのgroup1とdivのgroup2が兄弟要素

div内のpタグ同士が兄弟要素

です。

話を戻します。

.next()は自身の次の兄弟要素を指定するので、

$(this).next().slideToggle();

アコーディオンのHTMLだと、

$(this)にあたる、クリックされた要素のdtの次の兄弟要素にあたるddに対してslideToggle()を実行します。

$(this).children('.accordion__icon').toggleClass( 'is-open' );

これはクリックされた要素の子要素で、クラスが.accordion__iconの要素に対して、

クラス「is-open」を追加・削除します。

この部分では主に開閉に伴うアイコンの形状変更を行います。

ここでも.children()で要素の相対指定が出てきましたね。

要素の相対指定の種類

parents() ... 指定した要素の「先祖」要素を選択
children() ... 指定した要素の「子」要素を選択（何も指定がなければ全て）
parent() ... 指定した要素の「親」要素を選択（何も指定がなければ全て）
siblings() ... 指定した要素内の「兄弟」要素を選択（何も指定がなければ全ての兄弟）
next() ... 次の「兄弟」要素を選択（次の弟を指定）
nextAll()... 次の「兄弟」要素を選択（全ての弟を指定）
prev() ... 前の「兄弟」要素を選択（1つ前の兄を指定）
prevAll() ... 前の「兄弟」要素を選択（全ての兄を指定）

かなり、数がありますね。

これを使いこなせるようになれば、jQueryの為にクラス指定をしなくてもある程度対応できそうですね。

今日のまとめ

アコーディオンはslideToggleで実現できる
相対指定は種類が多く、条件も付与できる
使い方次第で、jQuery用のクラスを減らすことができる

新しくjQueryの相対指定を覚えました。

HTMLの階層構造をサクッと指定できてしまうのすごいですね。

では、また。

web制作のしおり

日々の学習をアウトプットします。