【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。
サイト制作でよく使うものをまとめました。

きのこさん
いろいろありますねー
きのこさん
いろいろあるのでまとめましたー

アコーディオン、シンプル版

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、シンプル版
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、シンプル版
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、シンプル版
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、シンプル版 ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
  });
});
見本ページをひらく（アコーディオン、シンプル版）

アコーディオン、一つ開けると他は閉じる

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一つ開けると他は閉じる
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一つ開けると他は閉じる
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一つ開けると他は閉じる
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、一つ開けると他は閉じる ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next('.accordion_inner').slideUp();
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
});
見本ページをひらく（アコーディオン、一つ開けると他は閉じる）

アコーディオン、一番目は開けておく

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="true">アコーディオン、一番目は開けておく
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一番目は開けておく
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一番目は開けておく
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、一番目は開けておく ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
  });
});
見本ページをひらく（アコーディオン、一番目は開けておく）

アコーディオン、一番目は開けておく（一つ開けると他は閉じる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="true">アコーディオン、一番目は開けておく（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一番目は開けておく（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオン、一番目は開けておく（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、一番目は開けておく（一つ開けると他は閉じる） ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next('.accordion_inner').slideUp();
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
});
見本ページをひらく（アコーディオン、一番目は開けておく（一つ開けると他は閉じる））

アコーディオンの閉じるボタンを複数作る

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオンの閉じるボタンを複数作る ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
.accordion_one .accordion_inner .box_one {
  height: auto;
  margin-bottom: 30px;
}
.accordion_one .accordion_inner .closeArea {
  width: 180px;
  margin: 0 auto;
}
.accordion_one .accordion_inner .closeArea .close_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 0;
  background: #2b2a27;
  padding: 15px 15px 15px 20px;
  font: inherit;
  line-height: 1.3;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_inner .closeArea .close_btn {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_inner .closeArea .close_btn {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_inner .closeArea .close_btn:hover {
  opacity: .8;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 10%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 18px;
  height: 18px;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::before,
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::after {
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(45deg);
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .accordion_one .accordion_inner .closeArea .close_btn {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
  });
  //閉じるボタンがクリックされたら
  $('.close_btn').click(function () {
    var accordion = $(this).closest('.accordion_one');
    //クリックされた.close_btnの親要素.accordion_innerを閉じる。
    $(this).closest('.accordion_inner').slideUp();
    accordion.find('.accordion_header').attr('aria-expanded', 'false');
    //閉じたあとは、そのアコーディオンの見出しまでスクロールして戻る
    // 移動先を0px上にずらす
    var adjust = 0;
    // スクロールの速度
    var speed = 500; // ミリ秒
    // 移動先を調整
    var position = accordion.offset().top - adjust;
    // スムーススクロール
    $('body,html').animate({ scrollTop: position }, speed, 'swing');
  });
});
見本ページをひらく（アコーディオンの閉じるボタンを複数作る）

アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。<br><br>一つ開けると他は閉じるバージョンです。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。<br><br>一つ開けると他は閉じるバージョンです。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる）
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">ブラウザによって閉じるボタンを押したあとの挙動が違ったので閉じた後はスクロールして上部に戻るようにしました。アコーディオンの中の内容が多いときにおすすめです。内容が少ないときは閉じるボタンは不要かなと思います。<br><br>一つ開けると他は閉じるバージョンです。</p>
      </div>
      <div class="closeArea">
        <button class="close_btn" type="button">閉じる<span class="i_box"><i class="one_i"></i></span></button>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる） ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  display: block;
  width: 100%;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 30px;
  border: 2px solid #2b2a27;
  border-top: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
/* aria-expanded="true" の見出しの次は、はじめから開いておく */
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  height: 160px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
.accordion_one .accordion_inner .box_one {
  height: auto;
  margin-bottom: 30px;
}
.accordion_one .accordion_inner .closeArea {
  width: 180px;
  margin: 0 auto;
}
.accordion_one .accordion_inner .closeArea .close_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 0;
  background: #2b2a27;
  padding: 15px 15px 15px 20px;
  font: inherit;
  line-height: 1.3;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_inner .closeArea .close_btn {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_inner .closeArea .close_btn {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_inner .closeArea .close_btn:hover {
  opacity: .8;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 10%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 18px;
  height: 18px;
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::before,
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::after {
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(45deg);
}
.accordion_one .accordion_inner .closeArea .close_btn .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .accordion_one .accordion_inner .closeArea .close_btn {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next('.accordion_inner').slideUp();
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
  //閉じるボタンがクリックされたら
  $('.close_btn').click(function () {
    var accordion = $(this).closest('.accordion_one');
    //.accordion_innerをすべて閉じる。
    $('.accordion_one .accordion_inner').slideUp();
    $('.accordion_one .accordion_header').attr('aria-expanded', 'false');
    //閉じたあとは、そのアコーディオンの見出しまでスクロールして戻る
    // 移動先を0px上にずらす
    var adjust = 0;
    // スクロールの速度
    var speed = 500; // ミリ秒
    // 移動先を調整
    var position = accordion.offset().top - adjust;
    // スムーススクロール
    $('body,html').animate({ scrollTop: position }, speed, 'swing');
  });
});
見本ページをひらく（アコーディオンの閉じるボタンを複数作る（一つ開けると他は閉じる））

アコーディオンで多階層のメニューを作る

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">アコーディオンで多階層のメニューを作る
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="accordion_one">
        <button class="accordion_header" type="button" aria-expanded="false">A
          <span class="i_box"><i class="one_i"></i></span>
        </button>
        <div class="accordion_inner">
          <div class="accordion_one">
            <a class="accordion_link" href="#">A_a</a>
            <a class="accordion_link" href="#">A_b</a>
          </div>
        </div>
      </div>
      <div class="accordion_one">
        <button class="accordion_header" type="button" aria-expanded="false">B
          <span class="i_box"><i class="one_i"></i></span>
        </button>
        <div class="accordion_inner">
          <div class="accordion_one">
            <a class="accordion_link" href="#">B_a</a>
            <a class="accordion_link" href="#">B_b</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオンで多階層のメニューを作る ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
}
.accordion_one .accordion_header,
.accordion_one .accordion_link {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #fff;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
/* 2段目 */
.accordion_one .accordion_inner .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
/* 3段目 */
.accordion_one .accordion_inner .accordion_inner .accordion_link {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover,
.accordion_one .accordion_link:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 0;
  box-sizing: border-box;
}
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header,
  .accordion_one .accordion_link {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header,
  .accordion_one .accordion_link {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
  });
});
見本ページをひらく（アコーディオンで多階層のメニューを作る）

アコーディオンのメニュー、横に並べる（一つ開けると他は閉じる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one _flex">
    <button class="accordion_header" type="button" aria-expanded="false">A
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="accordion_one">
        <a class="accordion_link" href="#">A_a</a>
        <a class="accordion_link" href="#">A_b</a>
      </div>
    </div>
  </div>
  <div class="accordion_one _flex">
    <button class="accordion_header" type="button" aria-expanded="false">B
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="accordion_one">
        <a class="accordion_link" href="#">B_a</a>
        <a class="accordion_link" href="#">B_b</a>
      </div>
    </div>
  </div>
  <div class="accordion_one _flex">
    <button class="accordion_header" type="button" aria-expanded="false">C
      <span class="i_box"><i class="one_i"></i></span>
    </button>
    <div class="accordion_inner">
      <div class="accordion_one">
        <a class="accordion_link" href="#">C_a</a>
        <a class="accordion_link" href="#">C_b</a>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオンのメニュー、横に並べる（一つ開けると他は閉じる） ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.accordion_area .accordion_one._flex {
  width: 33.333%;
}
.accordion_one .accordion_header,
.accordion_one .accordion_link {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #fff;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 11% 20px 7%;
  text-align: left;
  text-decoration: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
/* 開いた中のリンク */
.accordion_one .accordion_link {
  padding: 20px 7%;
  background-color: #fff;
  border-bottom-color: #e8e3d8;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover,
.accordion_one .accordion_link:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_header .i_box {
  right: 10%;
}
.accordion_one .accordion_inner {
  display: none;
  padding: 0;
  box-sizing: border-box;
}
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .accordion_one .accordion_link {
    font-size: 18px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    font-size: 16px;
    text-align: left;
    padding: 15px 60px 15px 15px;
  }
  .accordion_one .accordion_link {
    font-size: 16px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。
    $(this).next('.accordion_inner').slideToggle();
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next('.accordion_inner').slideUp();
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
});
見本ページをひらく（アコーディオンのメニュー、横に並べる（一つ開けると他は閉じる））

アコーディオン、横に開く（一つ開けると他は閉じる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">
      <span class="header_inner">A
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Aのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">
      <span class="header_inner">B
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Bのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">
      <span class="header_inner">C
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Cのテキストです。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、横に開く（一つ開けると他は閉じる） ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
  height: 300px;
  overflow: hidden;
}
.accordion_one .accordion_header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 300px;
  float: left;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 0;
  text-align: left;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .header_inner {
  padding: 15px;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_header .i_box {
  right: 10%;
}
.accordion_one .accordion_inner {
  float: left;
  width: 40%;
  height: 300px;
  overflow: hidden;
  display: none;
  padding: 0;
  border: 2px solid #2b2a27;
  border-left: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  padding: 15px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    justify-content: flex-start;
    font-size: 16px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerの横幅を開いたり閉じたりする。
    $(this).next().animate({ width: 'toggle' });
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next().animate({ width: 'hide' });
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
});
見本ページをひらく（アコーディオン、横に開く（一つ開けると他は閉じる））

アコーディオン、横に開く（一番目は開けておく、一つ開けると他は閉じる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="accordion_area">
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="true">
      <span class="header_inner">A
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Aのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">
      <span class="header_inner">B
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Bのテキストです。</p>
      </div>
    </div>
  </div>
  <div class="accordion_one">
    <button class="accordion_header" type="button" aria-expanded="false">
      <span class="header_inner">C
        <span class="i_box"><i class="one_i"></i></span>
      </span>
    </button>
    <div class="accordion_inner">
      <div class="box_one">
        <p class="txt_a_ac">Cのテキストです。</p>
      </div>
    </div>
  </div>
</div>

CSS

/* ===== アコーディオン、横に開く（一番目は開けておく、一つ開けると他は閉じる） ===== */
.accordion_area {
  max-width: 560px;
  margin: 0 auto;
  height: 300px;
  overflow: hidden;
}
.accordion_one .accordion_header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 300px;
  float: left;
  border: 0;
  background-color: #2b2a27;
  color: #fff;
  font: inherit;
  font-size: 26px;
  font-weight: bold;
  padding: 0;
  text-align: left;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;
}
.accordion_one:nth-of-type(2) .accordion_header {
  background-color: #e8dc6a;
  color: #2b2a27;
}
.accordion_one:nth-of-type(3) .accordion_header {
  background-color: #f3efe6;
  color: #2b2a27;
}
.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .header_inner {
  padding: 15px;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  margin-top: -20px;
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: .2s;
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: .2s;
  position: relative;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box {
  transform: rotate(-360deg);
}
.accordion_one .accordion_header .i_box .one_i::before,
.accordion_one .accordion_header .i_box .one_i::after {
  display: flex;
  content: "";
  background-color: currentColor;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i::before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::before {
  content: none;
}
.accordion_one .accordion_header[aria-expanded="true"] .i_box .one_i::after {
  transform: rotate(-45deg);
}
.accordion_one .accordion_header .i_box {
  right: 10%;
}
.accordion_one .accordion_inner {
  float: left;
  width: 40%;
  height: 300px;
  overflow: hidden;
  display: none;
  padding: 0;
  border: 2px solid #2b2a27;
  border-left: 0;
  box-sizing: border-box;
}
.accordion_one:nth-of-type(2) .accordion_inner {
  border-color: #e8dc6a;
}
.accordion_one:nth-of-type(3) .accordion_inner {
  border-color: #f3efe6;
}
.accordion_one .accordion_header[aria-expanded="true"] + .accordion_inner {
  display: block;
}
.accordion_one .accordion_inner .box_one {
  padding: 15px;
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}
@media screen and (max-width: 1024px) {
  .accordion_one .accordion_header {
    font-size: 18px;
  }
  .accordion_one .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_one .accordion_header {
    justify-content: flex-start;
    font-size: 16px;
  }
}

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

▽jquery.min.js（3.7.1）使用

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  //.accordion_oneの中の.accordion_headerがクリックされたら
  $('.accordion_one .accordion_header').click(function () {
    //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerの横幅を開いたり閉じたりする。
    $(this).next().animate({ width: 'toggle' });
    //開いているかどうか（aria-expanded）を切り替える
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    //クリックされた.accordion_header以外の.accordion_headerに隣接する.accordion_innerを閉じる
    $('.accordion_one .accordion_header').not(this).next().animate({ width: 'hide' });
    $('.accordion_one .accordion_header').not(this).attr('aria-expanded', 'false');
  });
});
見本ページをひらく（アコーディオン、横に開く（一番目は開けておく、一つ開けると他は閉じる））

メモ

jQueryを使えばアコーディオンを使っていろいろと応用ができるのでおすすめです。

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

きのこさん
コッペパンが好きです
きのこさん
クリームパンが好きです
デザインのメモ 2024.2.2

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。