【初心者でもわかる】コピペで使えるアコーディオンの実装とボタンデザインパターン3選

どうも7noteです。CSSでアコーディオンを実装するときのボタンデザイン3選

アコーディオンメニューの実装方法と、ボタンデザイン例を3つ紹介します。
それぞれ特徴の違う基本的な方法を３つ紹介しますので、組み合わせたりボタンの種類を変更するなどでオリジナルのデザインを作る参考になればと思います。

もちろんコピペでそのまま使っても問題ないレベルのものなので、用途にあわせてお使いください。

アコーディオンの初期ソースの書き方例

###基本設定

index.html

<dl class="acdn">
  <dt>質問１</dt>
  <dd>回答１回答１回答１回答１回答１回答１回答１回答１<br>
  回答１回答１回答１回答１回答１回答１。</dd>
  <dt>質問２</dt>
  <dd>回答２回答２回答２回答２回答２回答２。</dd>
</dl>

style.css

.acdn dt {
  background: #eee;
  position: relative;
}
.acdn dt:not(:first-of-type){
  margin-top: 5px;
}
.acdn dd {
  padding-left: 10px;
  display: none;
}

script.js

$(function(){
  $(".acdn dt").on("click", function(){
    $(this).next("dd").slideToggle();
    $(this).toggleClass("open");
  });
});

ボタンデザイン別CSS

その①：プラスとマイナスで作る

style.css

/* 「＋」と「－」で作る方法*/

.acdn dt::after {
  content: '＋';      /* 全角のプラス */
  position: absolute; /* 相対位置とする */
  top: 50%;           /* 上から50%の位置に指定 */
  right: 10px;        /* 右から10pxの位置に指定 */
  transform: translateY(-50%); /* 要素の半分だけ高さを上にずらす */
}
.acdn dt.open::after {
  content: '－';      /* 全角のマイナス */
}

結果

その②：三角を回転させる方法

style.css

/* 「▼」で作る方法*/

.acdn dt::after {
  content: '▼';      /* 下向きの三角 */
  position: absolute; /* 相対位置とする */
  top: 50%;           /* 上から50%の位置に指定 */
  right: 10px;        /* 右から10pxの位置に指定*/
  transition: .3s;    /* アニメーション時間を0.3秒に指定 */
  transform: translateY(-50%); /* 要素の半分だけ高さを上にずらす */
}
.acdn dt.open::after {
  transform: translateY(-50%) rotate(60deg); /* ずらしたのはキープしたまま回転させる */
}

結果

その③：スラッシュ２つを組み合わせた矢印で作る方法

style.css

/* 「／」と「＼」で作る方法*/


.acdn dt::before,
.acdn dt::after {
  position: absolute; /* 相対位置とする */
  font-size: 10px;    /* 適度な大きさにする */
  top: 50%;           /* 上から50%の位置に指定 */
  transform: translateY(-50%); /* 要素の半分だけ高さを上にずらす */
  transition: .3s;    /* アニメーション時間を0.3秒に指定 */
}

.acdn dt::before {
  content: '＼';      /* 全角の逆スラッシュ */
  right: 18px;        /* 右から18pxの位置に指定*/
}
.acdn dt::after {
  content: '／';      /* 全角のスラッシュ */
  right: 10px;        /* 右から10pxの位置に指定*/
}

.acdn dt.open::before {
  right: 10px;        /* 右からの位置をafterと入れ替える */
}
.acdn dt.open::after {
  right: 18px;        /* 右からの位置をbeforeと入れ替える */
}

結果

まとめ

どの方法でも大体のアコーディオンメニューで使えるような設計にしております。
表示位置などは微調整してお使いください。

小さなところですが、小さなところまでこだわって作っているサイトってかっこいいですよね！あこがれますし、そういうサイトを作りたいなって思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ