jQueryで簡単アコーディオンメニュー、サンプル

スマホサイトで利用する機会の多いアコーディオンメニュー。jQueryならとっても簡単に実装できますね。

シンプルなアコーディオンメニュー例（1）

dlタグで実装するアコーディオンメニュー。数行のスクリプトで動きが作れます。

See the Pen Untitled by mixtaro (@mixtaro) on CodePen.

<section id="demo1">
            <dl>
                <dt>アコーディオン1</dt>
                <dd>アコーディオン1の中身</dd>
                <dt>アコーディオン2</dt>
                <dd>アコーディオン2の中身</dd>
                <dt>アコーディオン3</dt>
                <dd>アコーディオン3の中身</dd>
                <dt>アコーディオン4</dt>
                <dd>アコーディオン<br>
                アコーディオン<br>アコーディオン
                <br>アコーディオン<br>アコーディオン</dd>
            </dl>
 </section>

javascriptは

$(function(){
            $("#demo1 dt").on("click", function(){
                $(this).next().slideToggle();
                $(this).toggleClass("active");
            });
        });

CSS ※アイコンはFont Awesomeを利用しています。

#demo1 dl {
  border-bottom: 1px solid #ddd;
}
#demo1 dt {
  display: block;
  padding: .6em 1em;
  border: 1px solid #ddd;
  border-bottom: none;
  cursor: pointer;
}
#demo1 dt:after {
  display: inline-block;
  float: right;
  font-family: 'FontAwesome';
  content: '\f107';
  text-align: right;
}
#demo1 dt.active:after {
  font-family: 'FontAwesome';
  content: '\f107';
}
#demo1 dd {
  display: none;
  margin-left:0;
  padding: .3em 1em;
  background: #efefef;
  border: 1px solid #ddd;
  border-top: none;
}

シンプルなアコーディオンメニュー例（2）

See the Pen Untitled by mixtaro (@mixtaro) on CodePen.

<div class="nav">
  <p class="navmenu">アコーディオンメニューA</p>
  <div class="navmenu-child">
    <ul>
      <li>A-Child-1</li>
      <li>A-Child-2</li>
      <li>A-Child-3</li>
      <li>A-Child-4</li>
    </ul>
  </div>
  <p class="navmenu">アコーディオンメニューB</p>
  <div class="navmenu-child">
    <ul>
      <li>B-Child-1</li>
      <li>B-Child-2</li>
      <li>B-Child-3</li>
      <li>B-Child-4</li>
    </ul>
  </div>
  <p class="navmenu">アコーディオンメニューC</p>
  <div class="navmenu-child">
    <ul>
      <li>C-Child-1</li>
      <li>C-Child-2</li>
    </ul>
  </div>
</div>

$('.navmenu-child').hide();
$('.navmenu').click(function(){
  $(this).next('.navmenu-child').slideToggle();
			$(this).toggleClass('opened').slideDown();
		});

ほとんど同じです^^;
要素の非表示をcssでやっているか、jQueryでやっているかの違い。

例1ではcssで要素を非表示にしていますが、JavaScriptが無効の状態の時には、cssで非表示の部分はそのまま表示されなくなります。

例2ではjQueryで制御しているのでJavaScriptが使えない場合では要素は非表示にならず全て表示されることになります。