WEB Tips デザイン・コーディング

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

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が使えない場合では要素は非表示にならず全て表示されることになります。

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-