jQueryで簡単アコーディオンメニューの作り方!

jQueryを使った簡単なアコディオンメニューの作り方を紹介します。

classを設定してコードを1行書くだけの簡単作業です。多くのブログで採用されている手法ですので是非お試しください。

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.menu {
  display: none;
}
.accordion-nav li a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: dotted 1px #aaa;
  text-align: center;
}
</style>
</head>
<body>
  <button style="width:100%;" onclick="jQuery('#menu').toggleClass('menu').slideToggle();">MENU</button>
  <div id="menu" class="menu">
    <nav class="accordion-nav">
      <li><a href="#">Accordion nav1</a></li>
      <li><a href="#">Accordion nav2</a></li>
      <li><a href="#">Accordion nav3</a></li>
    </nav>
  </div>
</body>

</html>

クラスを付けたり消したり

ここで行っている処理は極めて簡単で、classの値を付けたり消したりしているだけです。

.menuクラスにdisplay:block;を指定しているため、表示した段階では表示されていません。しかし、ボタンを押したタイミング(onclick)でtoggleClass()が発動して.menuクラスを消しているのです。

toggleClass()は指定した要素(ここでは.menu)が存在すれば「消して」、存在しなかったら「つける」という処理を行います。

まるでスイッチのようにONとOFFを繰り返すような動きをするため、アコーディオンみたいな動きになるわけですね。

ついでにスライドアニメーションも

toggleClass()だけアコーディオンメニューはほぼ完成です。

ただスライドして表示してくれたら、もう少しアコーディオンっぽくなりますよね。

jQueryにはスライドのアニメーションも用意されていて、それがslideToggle()になります。

  • slow
  • normal
  • fast

スライドのスピードも3種類用意されているので、色々試してみるといいかもしれません。