2021-06-01

【JavaScript】アコーディオンメニューの作り方。jQueryではありません。

JavaScript,プログラミング

こんにちは、ダイキです。
今回は、Javascriptで、アコーディオンメニューを作成してみます。
ドロップダウンメニューで検索してしまうと、なかなかヒットしないので、気をつける必要があります。

HTMLです。【JavaScript】アコーディオンメニューの作り方。jQueryではありません。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="accordion">
    <ul class="list">
      <li>
        <p class="js-menu menu arrow">ここをクリックすると、下にコンテンツを表示する。</p>
        <p class="contents">クリックされたので、表示されました。</p>
      </li>
      <li>
        <p class="js-menu menu arrow">ここをクリックすると、下にコンテンツを表示する。</p>
        <p class="contents">クリックされたので、表示されました。</p>
      </li>
      <li>
        <p class="js-menu menu arrow">ここをクリックすると、下にコンテンツを表示する。</p>
        <p class="contents">クリックされたので、表示されました。</p>
      </li>
      <li>
        <p class="js-menu menu arrow">ここをクリックすると、下にコンテンツを表示する。</p>
        <p class="contents">クリックされたので、表示されました。</p>
      </li>
      <li>
        <p class="js-menu menu arrow">ここをクリックすると、下にコンテンツを表示する。</p>
        <p class="contents">クリックされたので、表示されました。</p>
      </li>
    </ul>
  </div>


  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】アコーディオンメニューの作り方。jQueryではありません。


* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ddd;
}
li {
  list-style: none;
}

.accordion {
  width: 1000px;
  margin: 200px auto;
}
.accordion li {
  margin-bottom: 1rem;
}
.menu {
  padding: 1rem;
  background-color: #fff;
  color:#333;
  cursor: pointer;
  user-select: none;
}
.contents {
  height: 0;
  line-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: .3s;
}
.arrow {
  position: relative;
}
.arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background-color: #333;
}
.arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 23px;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background-color: #333;
}

/* js クラス付与 */
.contents.is-open {
  margin-bottom: 1rem;
  background-color: #fff;
  border-top: 1px solid #ddd;
  padding: 10px;
  line-height: normal;
  height: auto;
  opacity: 1;
}
.arrow.is-arrow::after {
  display: none;
}

JavaScriptです。【JavaScript】アコーディオンメニューの作り方。jQueryではありません。



const menu = document.querySelectorAll(".js-menu");

function toggle() {
  const content = this.nextElementSibling;
  this.classList.toggle("is-arrow");
  content.classList.toggle("is-open");
}

for (let i = 0; i < menu.length; i++) {
  menu[i].addEventListener("click", toggle);
}