HTML＋CSSだけでアコーディオンを実装
acquiesce.inc
Q&Aやメニューなどで使われるアコーディオン機能
jsとCSSを組み合わせて実装する事が多いですが、HTML+CSSだけでもアコーディオンの実装は可能です。
detailsとsummaryタグを使った基本的な開閉機能から、CSSによる「＋」「－」ボタンの装飾、Q&A形式へのカスタマイズまで、コピペで使えるサンプルコード付きで解説します。実装時のメリット・デメリットも紹介します。
アコーディオンメニュー
detailsとsummaryの組み合わせだけでアコーディオンが表示
CSSで装飾しなくても▶︎が自動で入ります。
HTMLサンプル
<div class="accordion-menu">
<details>
<summary>アコーディオンメニュー01</summary>
<div class="accordion-content">
<ul>
<li><a>サブメニュ-A</a></li>
<li><a>サブメニュ-B</a></li>
<li><a>サブメニュ-C</a></li>
</ul>
</div>
</details>
<details>
<summary>アコーディオンメニュー02</summary>
<div class="accordion-content">
<ul>
<li><a>サブメニュ-A</a></li>
<li><a>サブメニュ-B</a></li>
<li><a>サブメニュ-C</a></li>
</ul>
</div>
</details>
<details>
<summary>アコーディオンメニュー03</summary>
<div class="accordion-content">
<ul>
<li><a>サブメニュ-A</a></li>
<li><a>サブメニュ-B</a></li>
<li><a>サブメニュ-C</a></li>
</ul>
</div>
</details>
</div>三角形を非表示にして、＋/ーの開閉ボタン
コピペで使えるCSSサンプル
/* アコーディオン */
.accordion-menu details {
background: #fff;
border: 1px solid #ddd;
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
}
/* 開いている状態 */
.accordion-menu details[open] {
border-color: #31856c;
}
/* 見出し */
.accordion-menu summary {
padding: 25px 30px;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
}
/* 標準の三角アイコンを非表示 */
.accordion-menu summary::-webkit-details-marker {
display: none;
}
/* プラス・マイナス */
.accordion-menu summary::after {
content: "＋";
color: #187b66;
font-size: 28px;
}
.accordion-menu details[open] summary::after {
content: "－";
}
/* 開いた中身 */
.accordion-content {
padding: 0 30px 25px;
}
.accordion-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.accordion-content li {
padding: 15px 0;
border-top: 1px solid #ddd;
}
.accordion-content a {
color: #187b66;
text-decoration: underline;
}Q&Aの実装サンプル
上記アコーディオンメニューのCSSに追加するだけで、Q&Aの実装も可能
HTMLサンプル
<div class="accordion-menu faq">
<details>
<summary>質問１が入ります。</summary>
<div class="accordion-content">
<p>質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。質問１の回答が入ります。</p>
</div>
</details>
<details>
<summary>質問２が入ります。</summary>
<div class="accordion-content">
<p>質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。質問２の回答が入ります。</p>
</div>
</details>
<details>
<summary>質問３が入ります。</summary>
<div class="accordion-content">
<p>質問３の回答が入ります。質問３の回答が入ります。質問３の回答が入ります。質問３の回答が入ります。質問３の回答が入ります。質問３の回答が入ります。質問３の回答が入ります。</p>
</div>
</details>
</div>カスタムCSS
/* Q・A 共通 */
.accordion-menu.faq summary,
.accordion-menu.faq .accordion-content {
position: relative;
padding-left: 3em;
}
/* 質問 Q */
.accordion-menu.faq summary::before {
content: "Q";
position: absolute;
left: 1em;
color: #187b66;
font-weight: bold;
}
/* 回答 A */
.accordion-menu.faq .accordion-content::before {
content: "A";
position: absolute;
left: 1em;
color: #d66a54;
font-weight: bold;
}実装時のメリット・デメリット
メリット
- HTMLとCSSだけで実装可能
- jsを使わなくていい
- CSSで自由にカスタム可能
デメリット
- 標準のdetailsではクリック操作が基本
- ホバーの開閉もできるが、スマホではホバーが使えない
