【jQuery】アコーディオンでおしゃれなQ&Aを作ってみる

<div class="accordion_area">
  <div class="accordion_one">
    <button class="ac_header" type="button" aria-expanded="false">
      <span class="p-faq__headinner">
        <span class="p-faq__q-txt">テキストテキスト？</span>
      </span>
      <span class="i_box"></span>
    </button>
    <div class="ac_inner">
      <div class="p-faq__bodyinner">
        <p class="p-faq__a-txt">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="ac_header" type="button" aria-expanded="false">
      <span class="p-faq__headinner">
        <span class="p-faq__q-txt">アコーディオンのQ&Aです。押すと答えがひらきます。</span>
      </span>
      <span class="i_box"></span>
    </button>
    <div class="ac_inner">
      <div class="p-faq__bodyinner">
        <p class="p-faq__a-txt">答えのテキストです。もう一度押すと閉じます。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="ac_header" type="button" aria-expanded="false">
      <span class="p-faq__headinner">
        <span class="p-faq__q-txt">いくつでも増やせますか？</span>
      </span>
      <span class="i_box"></span>
    </button>
    <div class="ac_inner">
      <div class="p-faq__bodyinner">
        <p class="p-faq__a-txt">accordion_one をふやすだけで、いくつでも増やせます。</p>
      </div>
    </div>
  </div>
</div>

/*=========
accordion
=========*/
.accordion_area .accordion_one .ac_header {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #e8e3d8;
  padding: 1.5rem 4rem 1.5rem 2rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_area .accordion_one .ac_header:not([aria-expanded="true"]):hover {
  background-color: #f3efe6;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header {
  background-color: #f3efe6;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header:not([aria-expanded="true"]):hover {
  background-color: #ffffff;
}
.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}
.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #2b2a27;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #2b2a27;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: .3s;
}
.accordion_area .accordion_one .ac_header[aria-expanded="true"] .i_box:after {
  height: 0;
}
.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-left: 1px solid #e8e3d8;
  border-right: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  box-sizing: border-box;
  background: #fff;
}

/*=========
faq
=========*/
.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__headinner::before {
  position: absolute;
  left: 0;
  content: "Q．";
  color: #2b2a27;
  font-size: 20px;
  font-weight: bold;
}
.p-faq__headinner .p-faq__q-txt {
  font-size: 20px;
}
.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner::before {
  position: absolute;
  left: 0;
  content: "A．";
  color: #6b675f;
  font-size: 20px;
  font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt {
  font-size: 20px;
  margin: 0;
}

/* 動きを減らす設定のとき（jQuery の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .accordion_area .accordion_one .ac_header,
  .accordion_area .accordion_one .ac_header .i_box:after { transition: none; }
}

$(function(){
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $('.accordion_one .ac_header').click(function(){
    $(this).next('.ac_inner').slideToggle();
    // 開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
  });
});