あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】【jQuery】ボタンを押す度に開くアコーディオンを実装するテクニック/Multi Stage Accordion

【jQuery】【jQuery】ボタンを押す度に開くアコーディオンを実装するテクニック/Multi Stage Accordion

スポンサーリンク

実装内容

ボタンを押す度に開いていくアコーディオンを実装する方法です。下部にあるボタンを押していくと展開する仕組みはありそうで、ないのではないかと思います。

実装所要時間:15分程度

実装方法

実装に必要なスクリプトはたったのこれだけです。

$(function(){

  var set = {
    num: 0,
    numMax: 10
  }

  set.numMax = $('.block').length - 1;

  $('.btn').on('click',function() {
    set.num ++;
    setHeight = $('.block').eq(set.num).find('.inner').outerHeight();
    if(set.num > set.numMax){
      $('.block').not($('.block').eq(0)).animate({'height': 0},500);
      $('html,body').animate({scrollTop:$('#accordion').offset().top},500,function(){
        set.num = 0;
        $('.block').removeClass('open');
        $('.btn').removeClass('max');
      });
    } else {
      $('.block').eq(set.num).addClass('open');
      $('.block').eq(set.num).animate({'height':setHeight},function(){
        if(set.num >= set.numMax){
          $('.btn').addClass('max');
        }
      });
    }
  });

});

【簡単な解説】
現在制作中。閉じた時はheight0。クリックしたら、.heightで高さを取得する

スポンサーリンク