【jQuery】アコーディオンメニューの書き方【サンプル】

今回は、jQueryで「アコーディオンメニュー」を実装していきます。

アコーディオンメニューとは？
アコーディオンメニューの書き方
実装結果

アコーディオンメニューとは？

アコーディオンメニューとは、メニューを押したら下からスラスラ降りてくるメニューのことです。

早速実装してみましょう。

アコーディオンメニューの書き方

HTML

まずは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="./CSS/style.css" />
  </head>
  <body>
    <div id="contaner">
      <dl class="accordion">
        <dt>メニュー1</dt>
        <dd>
          サブメニュー
        </dd>
        <dt>メニュー2</dt>
        <dd>
          サブメニュー
        </dd>
        <dt>メニュー3</dt>
        <dd>
          サブメニュー
        </dd>
      </dl>
    </div>
    <script
      type="text/javascript"
      src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"
    ></script>
    <script src="./js/main.js"></script>
  </body>
</html>

jQuery

jQueryはなんと、5行で事足ります。

$(function () {
  $(".accordion dt").on("click", function () {
    $(this).next().slideToggle();
  });
});

CSS

最後にCSSでレイアウトを整えます。

@charset "UTF-8";

.container {
    padding: 2%;
}

.accordion {
    width: 30%;
}

.accordion dt,
.accordion dd {
    margin: 0;
    padding: 0;
}

.accordion dd {
    padding: 1.2em 1.2em 1.5em;
    display: none;
}

.accordion dd:last-child {
    border-bottom: 1px solid #ddd;
}

.accordion dt {
    background: #232323;
    border-radius: 6px;
    color: #fff;
    margin: 0 0 .5em 0;
    padding: 10px;
    cursor: pointer;
}

.accordion dt.active {
    background: #2f2f2f;
}

実装結果

こんな感じでメニューができたと思います。

メニューをクリックすると、

下からスルッとサブメニューが出てきます。