一部開いた状態のアコーディオンメニュー（ドロップダウンメニュー）をJavaScriptで実装してみる（パターン2）（備忘録）

今回は、ページ読み込み時に一部だけメニューが開いた状態のアコーディオンメニュー（ドロップダウンメニュー）を実装してみる。

それでは解説に入っていく。

htmlの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アコーディオンメニュー</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <!-- アコーディオン -->
        <div class="bl_accordion">
          <h3 class="bl_accordionTitle active">タイトル1</h3>
          <div class="bl_accordionContent open">
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
            <p>タイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入りますタイトル1の内容が入ります</p>
          </div>
          <h3 class="bl_accordionTitle">タイトル2</h3>
          <div class="bl_accordionContent">
            <p>タイトル2の内容が入ります</p>
            <p><img src="img_sample01.jpg" alt="サンプル画像"></p>
          </div>
          <h3 class="bl_accordionTitle">タイトル3</h3>
          <div class="bl_accordionContent">
            <p>タイトル3の内容が入ります</p>
            <ul class="md_markList">
              <li>タイトル3の内容が入ります</li>
              <li>タイトル3の内容が入りますタイトル3の内容が入りますタイトル3の内容が入りますタイトル3の内容が入ります</li>
              <li>タイトル3の内容が入ります</li>
              <li>タイトル3の内容が入ります</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </main>
  <script src="style.js"></script>
</body>
</html>

ソースは前回のhtmlのソースとほぼ同じだ。違いは下記のみである。

<h3 class="bl_accordionTitle active">タイトル1</h3>
<div class="bl_accordionContent open">

最初からアコーディオンメニューを展開させておきたい箇所に、activeとopenのクラスをつけてあげるだけでOKだ。

cssの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  width: 100%;
}

/* ==========================
  アコーディオンメニュー
========================== */
.bl_accordion {
  background-color: #fff;
}
.bl_accordionTitle {
  font-size: 28px;
  font-weight: bold;
  background-color: #d6a194;
  padding: 20px 90px 20px 40px;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
}
.bl_accordionTitle::before {
  content: "";
  width: 35px;
  height: 35px;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
  position: absolute;
  top: 10px;
  transform: rotate(45deg);
  right: 40px;
  transition: 0.3s;
}
.bl_accordionTitle.active::before {
  transform: rotate(225deg);
  top: 30px;
}
.bl_accordionTitle:hover::before,
.bl_accordionTitle.active::before {
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
}
.bl_accordionTitle:hover,
.bl_accordionTitle.active {
  background-color: #6d2412;
  color: #fff;
}
.bl_accordionContent {
  padding: 0 40px;
  opacity: 0;
  height: 0;
  line-height: 0;
  transition: 0.3s;
}
.bl_accordionContent > * + * {
  margin-top: 0;
}
.bl_accordionContent img {
  height: 0;
}
.bl_accordionTitle:not(:first-of-type) {
  border-top: 1px solid #6d2412;
}
.bl_accordionContent.open {
  padding: 40px;
  opacity: 1;
  line-height: normal;
  height: auto;
}
.bl_accordionContent.open > * + * {
  margin-top: 10px;
}
.bl_accordionContent.open img {
  height: auto;
}
/* ==========================
  タブ以外のコンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 30px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 250%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}
.md_markList {
  list-style-type: disc;
  margin-left: 1.4rem;
}

/* ====================================
  ここからPC幅
==================================== */
@media screen and (min-width: 768px) {
  .hp_displaySP {
    display: none !important;
  }
}

/* ====================================
  ここからスマホ幅
==================================== */
@media screen and (max-width: 767px) {
  .hp_displayPC {
    display: none !important;
  }
}

前回との違いは、➕➖アイコンではなく、くの字型のアイコンで実装していること、また、タイトル間に仕切り線をつけている点だ。

.bl_accordionTitle::before {
  content: "";
  width: 35px;
  height: 35px;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
  position: absolute;
  top: 10px;
  transform: rotate(45deg);
  right: 40px;
  transition: 0.3s;
}
.bl_accordionTitle.active::before {
  transform: rotate(225deg);
  top: 30px;
}
.bl_accordionTitle:not(:first-of-type) {
  border-top: 1px solid #6d2412;
}

今回は背景色ではなく、ボーダーを用いて対応した。正方形の枠をwidthとheightで作っておけば、それに対応した長さのボーダーを指定することができる。

仕切り線も、最初以外のタイトル要素の上部に線が引けるように設定した。これで以上になる。

JavaScriptの記述は変わらないため、省略するが、ソースは掲載しておきたいと思う。

JavaScriptの記述について

'use strict';

// アコーディオン
document.addEventListener('DOMContentLoaded', function(){

  const accordionTitle = document.querySelectorAll('.bl_accordionTitle');

  for (let i = 0; i < accordionTitle.length; i++){
    accordionTitle[i].addEventListener('click', function() {
      this.classList.toggle('active');
      this.nextElementSibling.classList.toggle('open');
    });
  }
});