EC用公式アカウント
JQuery不要！ HTMLだけで、アコーディオンの開閉を連動させる方法
以前、「簡単！ HTMLだけでアコーディオンメニューを作成する方法 ①」を紹介しました。
今回は、details要素で新たに追加されたname属性を使用することで、アコーディオンメニューの項目が複数ある場合、JQueryを使用しなくても、開閉を連動させる方法を紹介します。
以下のそれぞれname属性ありのグループと、name属性なしのグループを上から順番にクリックしてみてください。
name属性ありのグループは、クリックすると開いていた要素が連動して閉じるのが分かります。
設定方法
設定は簡単です。HTMLのdetails要素のタグの中にname属性を追加するだけです。name属性の値は任意ですが、同じ値でグループ化してください。
<details name="sample">
<summary>name属性あり</summary>
<p>ここに項目に対する内容などを記述する</p>
</details>Webコーディング、デザイナーの方へ
オートプロジェクトでは、TEGARU（テガル）というテーマ販売サービスを行っております。企業や飲食店など、業種ごとに特化したデザインで安価に提供していますので、予算の限られたお客様への提案にぜひご利用ください。
▶ 初めてのWebサイトに最適！テンプレートで簡単に作ることができる、各業種に特化したWordPressテーマ「TEGARU（テガル）」
オートプロジェクトでは、TEGARU（テガル）というテーマ販売サービスを行っております。企業や飲食店など、業種ごとに特化したデザインで安価に提供していますので、予算の限られたお客様への提案にぜひご利用ください。
▶ 初めてのWebサイトに最適！テンプレートで簡単に作ることができる、各業種に特化したWordPressテーマ「TEGARU（テガル）」
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
