HTMLだけでアコーディオンメニューを実装する方法

どうもこんにちは、ちはるです。

皆さん、webページ中の文章をたたんで、クリック一つでたたんだ文章を表示したり、また隠したりしたくないですか？

僕はしたいです。

と言う事で、今回はHTMLを使ったアコーディオンメニューの実装方法についてです。

使うのは<details>と<summary>

HTMLの<details>タグと、子要素として<summary>タグを使うことで、簡単にアコーディオンメニューを実装することが可能です。

これらのタグの使い方によって、何やらいろいろできるようなので、詳しく見ていきたいと思います。

<details>だけ使う場合

<details> タグは、それ単体だけで使用することも可能です。

使用方法は以下のような感じ。

<details>メニュー内容の文章だよ</details>

これだけ？となりそうですが、これだけです。

実際に動かしてみた様子がコチラ↓

See the Pen VJQVor by chiharu (@chiharu1122) on CodePen.

<details>タグで囲った文章が、なんかイイ感じに畳まれてますね。

「▶詳細」みたいな見出しまで勝手に生成してくれていることが分かります。

ね？簡単でしょ？

とはいえ、これだけじゃちょっと味気ないと感じる方は、<summary>タグを使用する以下をご覧ください。

<details>とあわせて<summary>を使う場合

summaryとは、日本語訳すると「概要」という意味。

つまり、<summary>タグは<details>タグに関する概要を記述するタグになります。

よって、この<summary>タグを使うことで、アコーディオンメニューの概要を明示することが可能です。

使い方は以下の通り。

  <details>
<summary>メニューの概要</summary>
メニュー内容の文章だよ
</details>

これだけです。

実際に動かしてみたものはコチラ↓

See the Pen details+summary by chiharu (@chiharu1122) on CodePen.

<summary>タグ未使用の場合に「▶詳細」と良しなに表示されていた部分が、<summary>で明示した概要で表示されていますね。

もうこれだけで十分アコーディオンしてるんですが、他にもちょっとだけ見てみましょう。

アコーディオンメニューをネストしてみる

使い方によってはアコーディオンメニューの中にさらにアコーディオンメニューを突っ込みたい場合があるかもしれません。

そういった場合は、紹介してきた２つのタグを複数使用してやることで、ネストすることが可能です。

  <details>
<summary>メニューの概要</summary>
メニュー内容の文章だよ
    <details>
<summary>メニューの概要２</summary>
メニュー内容の文章２
    </details>
</details>

See the Pen menu-nest by chiharu (@chiharu1122) on CodePen.

ちなみに、２つ目の<summary>タグを指定しなかった場合、概要には例の「▶詳細」が補完されます。

アコーディオンメニューを装飾してみる

アコーディオンメニューの実装自体はもう終了しているのですが、そうは言ってももう少しいろいろ飾り立てたいのが人情ってやつですよね。

ということで作ったアコーディオンメニューをCSSで飾り立てましょう。

See the Pen details+css by chiharu (@chiharu1122) on CodePen.

はい、と言うことでコチラの例では何をやっているのか、要点だけかいつまんで説明します。

メニューを開いた際の動きを指定

details.makura[open]{
border:1px dotted #000000;
transition-duration:50s;
}

「▶枕草子」をクリックすると、文章全体がドット線で囲まれましたよね？

この処理を行うには、セレクタに対して[open]と加えてやります。

こうすることで、この例では<details class=”.makura”>で囲まれた全体を、メニュー表示後で枠線を加えたりしています。

.spring[open] summary{
color:#ff0000;
}
.summer[open] summary{
color:#00aa00;
}

「▶春はあけぼの。」や「▶夏や夜。」の部分についても、同様のことが言えます。

<summary>に対して[open]を設定してやることで、概要部分の装飾も可能です。

メニューを最初から開いた状態にする

「▶枕草子」クリックでメニューを開いた際、「▶春はあけぼの。」は以下の文章が畳まれていたのに、「▶夏や夜。」については文章が畳まれない状態で表示されましたよね？

このように、<details>の内容を畳まない状態で表示したい場合、HTMLタグの方でopen=””を付与してやればOKです。

例のソースでいうと、この部分ですね。

<details class="summer" open="">
省略
</details>

このように、簡単に開いておきたい部分を指定することが可能です。

また、先ほど説明した通り[open]による装飾も有効ですので、デザインの幅が広がりますね。

おわりに

ということで、HTMLだけで実装するアコーディオンメニュー＋αでした。

これで皆も文章を畳みまくろうな！

ではでは、ここまで読んで下さりありがとうございました。