UIエレメント - アコーディオン
HTML要素「details」＋「summary」を利用してアコーディオンを実現しています。
基本.bl_accordion
開閉効果と「summary」のエリア右側にアイコンが表示されるのみなので、各々スタイルは自由にあててください。
（例）
Headingタグを利用した例
アコーディオンの展開部分です。自由にレイアウトしてください。
.bl_boxを利用した例
.bl_boxを利用した例
アコーディオンの展開部分です。自由にレイアウトしてください。
モディファイア
ダークスタイル（開閉アイコン白抜き）.bl_accordion + .bl_accordion__dark
サマリーテキストが入ります
サマリーテキストが入ります
アコーディオンの展開部分です。自由にレイアウトしてください。
枠線あり.bl_accordion + .bl_accordion__border
サマリーテキストが入ります
サマリーテキストが入ります
アコーディオンの展開部分です。自由にレイアウトしてください。
展開部の境界線つき.bl_accordion + .bl_accordion__line
サマリーテキストが入ります
サマリーテキストが入ります
アコーディオンの展開部分です。自由にレイアウトしてください。
角丸.bl_accordion + .bl_accordion__rounded
サマリーテキストが入ります
サマリーテキストが入ります
アコーディオンの展開部分です。自由にレイアウトしてください。
FAQ用.bl_faq
質問文が入りますテキストダミー
見出し風のアコーディオンメニューです。
テキストダミー
テキストダミー
質問文が入ります長文の場合はこうなりますテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー
見出し風のアコーディオンメニューです。
テキストダミー
テキストダミー
質問文が入りますテキストダミー
見出し風のアコーディオンメニューです。
テキストダミー
テキストダミー
アコーディオンを採用しない場合
「details」タグに「open」と.bl_faq__notOpenを追記すると開閉しなくなります。
質問文が入りますテキストダミー
見出し風のアコーディオンメニューです。
テキストダミー
テキストダミー
質問文が入りますテキストダミー
見出し風のアコーディオンメニューです。
テキストダミー
テキストダミー