【CSS + jQuery】アコーディオンの作り方（プラスマイナス他）

ホームページの「よくある質問」などでよく使うアコーディオン。

カスタマイズしやすいように最低限のコードに絞って残します。

CSSのみで作る方法などを見かけますが、
なるべく余計なコードを書きたくないのでjQueryとのセットがおすすめ。

今回は2パターン作りますが、クリックアイコンのデザインが違うだけで開閉の仕組みはほぼ同じです。

プラスマイナスアイコンのアコーディオン

プラスアイコンをクリックすると、隠れていた内容が表示され、マイナスアイコンに変わるアコーディオンです。

See the Pen
rNjQePY by kei (@momoi)
on CodePen.

重要部分のみ抜粋。

<ul class="ac">
  <li>
    <div class="ac-label">
      <p>Label</p>
      <div class="icon-wrap"><span class="icon"></span></div>
    </div>
    <div class="ac-content">
      <p>Content</p>
    </div>
  </li>
</ul>

最初から表示させるのが.ac-label、
アイコンクリックで表示させるのが.ac-contentです。

コンテンツを増やしたいときはliを増やしていくだけ。

.ac > li {
  /* margin-bottomにすると変な動きをするのでpaddingにする */
  padding-bottom: 6px; 
  list-style: none;
}
.ac-label  {
  cursor: pointer;
  position: relative;
}
.ac-content {
  display: none;
}
/* .ac-labelを親要素としてアイコン位置を絶対値で指定 */
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #000;
}
/* .icon-wrapの中でプラスを中央に位置させるために.iconを親要素に設定 */
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* プラスアイコン */
/* ２本の線を.icon-wrapの中央に並行に重ねる */
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* そのうち1本を縦にする */
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

$(function () {
  $('.ac-label').click(function () {
    $(this).next('div').slideToggle();
    $(this).find(".icon").toggleClass('open');
  });
});

少しだけ解説。

.ac-labelをクリックすると.ac-labelの隣接要素div(つまり.ac-content)が表示or非表示される。

.iconに.openを追加or削除することで、CSS側でプラスアイコン↔︎マイナスアイコンの切り替えを行う。

矢印アイコンのアコーディオン

下向き矢印アイコンをクリックすると、隠れていた内容が表示され、上向き矢印に変わるアコーディオンです。

See the Pen
NWdERBe by kei (@momoi)
on CodePen.

HTML, jQueryは１と同じ。

CSSもほとんど同じ。.iconの擬似要素が変わっただけです。

.icon:before {
  position: absolute;
  content: "";
  transition: all .4s;
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}

/* 下向き矢印クリック後、上向きに回転する */
.icon.open:before {
  top: 56%;
  transform: translate(-50%, -50%) rotate(-45deg);
}