1. TOPページに戻る
  2. Javascript
  3. 複数のスライドダウンコンテンツを実装するjQuery

複数のスライドダウンコンテンツを実装するjQuery

内容をそのまま表示するとページが長く伸びてしまう時に最初に内容を隠しておき、ある箇所を押すと内容がスルスルと表示されるものがあります。今回はそちら複数ある場合の作り方です。

スライドで表示するコンテンツが1つの場合は単純ですが、複数ある場合閉じるボタンがある場合という条件があると 少しだけ考える必要があります。というか私がよくやり方を忘れます。

HTML

HTMLは例として以下のようにしました。

<ul class="slideContent">
  <li>
  <h2>見出しテキスト1</h2>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
    <p class="close">閉じる</p>
  </div>
</li>
<li>
  <h2>見出しテキスト2</h2>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
    <p class="close">閉じる</p>
  </div>
</li>
~~中略~~
</ul>

CSS

CSSは見た目を整えるものしか主に指定していないので特に記しませんが、コンテンツの非表示をCSSで指定しています。

.inner {
  display: none;
}

JavaScript

ここからが肝心のJavaScriptのコードです。

$(function(){
  if($('.slideContent').size() > 0){
    //コンテンツの数
    var slideContentNum = $('.slideContent li').length;
    //コンテンツ分のフラグ
    var navFlag = new Array();
    for( i = 0 ; i < slideContentNum ; i++ ){
        navFlag[i] = true;
    };
    //クリックした時の処理
    $('.slideContent h2').click(function(){
      //何個目のものがクリックされたかを確認
      var clickNum = $(this).parent().index();
      //フラグがtrueだったら
      if(navFlag[clickNum]){
        $(this).next('.inner').slideDown();
        $(this).addClass('current');
        navFlag[clickNum] = false;
      }
      else{
        $(this).next('.inner').slideUp();
        $(this).removeClass('current');
        navFlag[clickNum] = true;
      }
    });

  //閉じるをクリックした時の処理
    $('.slideContent .close').click(function(){
      var closeNum = ($(this).parents('li').index());
      $(this).parents('.inner').slideUp('fast');
      $(this).parents('.inner').prev('h2').removeClass('current');
      navFlag[closeNum] = true;
    });
  }
});

親のliが何番目のものかでフラグの番号をつけて開け締めをしている感じです。

よく忘れるのがコンテンツ分のフラグを作るところで、これが一個だけだと1番目押して開いた後に続けて2番目が開かないとか 2回クリックしないと動かないなどの現象が起きます。楽しいです。

【更新】2019/11/04 コードのインデント調整・サンプルが動いていなかったので調整。