アコーディオン

概要

タイトルをクリックしたらコンテンツが開閉される。
Boxは配下は一つのページで複数表示されることを想定し、idでなくclassで制御している。

HTML

HTML

<dl class="accordionBox">
  <dt class="accordionBoxTitle js-accordionBoxTitle">
    タイトル（クリック領域）
    <i class="accordionBoxIcon"></i>
  </dt>
  <dd class="accordionBoxDetail js-accordionBoxInner">
    コンテンツ（開閉領域）
  </dd>
</dl>

CSS

CSS

.accordionBoxTitle {
  position: relative;
  padding: 4.8% 5%;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.accordionBoxIcon {
  position: absolute;
  top: 50%;
  right: 1.5vw;
}

.--open .accordionBoxIcon::before,
.--open .accordionBoxIcon::after {
  display: block;
  width: 12px;
  height: 1px;
  content: "";
  background: #46555a;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.--open .accordionBoxIcon::after {
  position: absolute;
  top: 0;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

.--close .accordionBoxIcon::after,
.accordionBoxTitle.opened .accordionBoxIcon::after {
  position: absolute;
  top: 45%;
  right: 0;
  display: block;
  width: 12px;
  height: 1px;
  content: "";
  background: #46555a;
}

.accordionBoxDetail {
  padding: 1.8% 1em 7%;
  font-size: 10px;
  text-align: justify;
}

JavaScript

JavaScript

// DOMが構築されたら実行
$(document).ready(function () {

  // アコーディオン
  $('.js-accordionBoxInner').css('display', 'none');
  $('.js-accordionBoxTitle').toggleClass('--open');

  $('.js-accordionBoxTitle').click(function () {
    // .js-accordionBoxTitleのclassを制御
    $(this).toggleClass("--close");
    $(this).toggleClass('--open');
    // クリックした.js-accordionBoxTitleの次にある.js-accordionBoxInnerをスライドで表示/非表示する
    $(this).next('.js-accordionBoxInner').stop(true, true).slideToggle();
  });
});