アコーディオンUI

タイトルだけ見せて詳細を隠すUI。

クラスjs-accordionを指定した要素の中に、開閉するトリガーとなる要素と、隠すコンテンツとなる要素を内包し、トリガー要素にクラスacc_headを付与し、コンテンツ要素にクラスacc_bodyを付与。
ここでは、dl要素内に、div要素.js-accordionを並べ、その中にdt要素.acc_headと、dd要素.acc_bodyを入れている。

表示サイズを確認するためのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。

だいたい20文字くらいのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。

表示サイズを確認するためのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。

上のサンプルは装飾がないが、コンポーネント「よくあるご質問」と組み合わせると、しっくりくる。

表示サイズを確認するためのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。

だいたい20文字くらいのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。

表示サイズを確認するためのサンプルテキスト

この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。この文章は、表示サイズを確認するための、40文字くらいのサンプルテキストです。