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

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回クリックしないと動かないなどの現象が起きます。楽しいです。