Zenn
🎵

【Web制作】jQueryによるアコーディオンメニュー！

2021/05/16に公開
CSS
HTML
jQuery
Sass
tech

アコーディオンメニュー

Webページでよくみられるアコーディオンメニューを実装してみました。

実装例

  • accordion：アコーディオン1つのアイテムです。
  • accordion-header：初期表示されているアコーディオンのヘッダー部です。
    • box: ヘッダー部の右端のアイコンです。
  • accordion-contents：アコーディオンのヘッダーを押下することで表示されます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <title>アコーディオンメニュー</title>
</head>
<body>
  <main>
    <h2>アコーディオンメニュー</h2>
    <div class="wrap">
      <div class="accordion">
        <div class="accordion-header">
          哺乳類
          <div class="box"></div>
        </div>
        <div class="accordion-contents">
          <p>犬</p>
          <p>猫</p>
          <p>猿</p>
        </div>
      </div>
      <div class="accordion">
        <div class="accordion-header">
          爬虫類
          <div class="box"></div>
        </div>
        <div class="accordion-contents">
          <p>かめ</p>
          <p>カメレオン</p>
          <p>トカゲ</p>
          <p>へび</p>
        </div>
      </div>
      <div class="accordion">
        <div class="accordion-header">
          両生類
          <div class="box"></div>
        </div>
        <div class="accordion-contents">
          <p>蛙</p>
          <p>イモリ</p>
        </div>
      </div>
    </div>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
style.scss
@charset "utf-8";
@import "_reset.scss";

@mixin accordion-header($bg_color: blue, $color: white) {
    background-color: $bg_color;
    color: $color;
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

@mixin accordion-contents($border_color) {
    display: none;
    padding: 10px 0;

    border-left: 2px solid $border_color;
    border-right: 2px solid $border_color;
    border-bottom: 2px solid $border_color;
}

main {
    text-align: center;
    margin-top: 20px;

    .wrap {
        margin-top: 20px;
    }

    p {
        padding: 10px 0;
    }
}

.accordion {
    max-width: 1000px;
    margin: 0 auto;
}

.accordion-header {
    @include accordion-header;

    &:hover {
        opacity: .6;
    }

    .box {
        position: absolute;
        top: 50%;
        right: 2%;
        margin-top: -10px;
        width: 10px;
        height: 10px;
        border: 3px solid;
        border-color: white white transparent transparent;
        transform: rotate(135deg);
    }
    &.open .box {
        position: absolute;
        top: 50%;
        right: 2%;
        width: 10px;
        height: 10px;
        border: 3px solid;
        border-color: white white transparent transparent;
        transform: rotate(-45deg);
    }
}

.accordion-contents {
    @include accordion-contents(blue)
}

.accordion:nth-of-type(2) {
    .accordion-header {
        @include accordion-header(green, white);
    }

    .accordion-contents {
        @include accordion-contents(green)
    }
}

.accordion:nth-of-type(3) {
    .accordion-header {
        @include accordion-header(orange, white);
    }

    .accordion-contents {
        @include accordion-contents(orange)
    }
}
  • .accordion-headerを押下することで、.accordion-contentsを表示させます。
  • $(this).next().stop().slideToggle(300);
    • $(this)　→　.accordion-header
    • $(this).next()　→　.accordion-contents
    • .stop()　→ 連打対策です。
    • .slideToggle(ミリ秒)　→ 表示中ならば非表示にする / 非表示ならば表示する
script.js
$(".accordion-header").on("click", function () {
    $(this).next().stop().slideToggle(300);
    $(this).toggleClass("open")
    return false;
});

動作確認

  • 初期表示

  • アコーディオンを開く

Discussion