最終更新日：2022.05.23 [月]　公開日：2020.03.16 [月]　カテゴリー：html・CSS・jQuery・JS備忘

縦でも横でも、アコーディオンなメニューの要望はとても多いので、いつも自分が使うやり方をまとめました。

HTML

  
 親要素１
    

      
子要素１
      
子要素２
      
子要素３
    
  
  
 親要素２
    

      
子要素１
      
子要素２
      
子要素３
    
  
  
 親要素３
    

      
子要素１
      
子要素２
      
子要素３
    
  

Javascript

$(this).toggleClass(“active”).next().slideToggle(200);
クリックした要素にactiveをつけて、次の要素をスライドダウンさせます。（）内は速さの設定。

$(“.parent”).not(this).removeClass(“active”).next().slideUp(200);
これで自分以外の親要素からactiveクラスを外してスライドアップさせます

$(“.parent”).click(slide_menu);
.parentをクリックしたときにslide_menuの関数を実行。

CSS

.child {
    display: none;
}

結果

• 親要素１
  • 子要素１
  • 子要素２
  • 子要素３
• 親要素２
  • 子要素１
  • 子要素２
  • 子要素３
• 親要素３
  • 子要素１
  • 子要素２
  • 子要素３