【jQuery】ボタンを押す度に中身が開いていく多段アコーディオンを実装するテクニックのデモページ/Multi Stage Accordion(Demo page)

※デベロッパーツール等でソースコードをご確認ください

Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.
Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.
Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.
Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.
Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.Dummy Text.

Read more

Close

スポンサーリンク

CSS

.wrap {
  width: 768px;
  margin: 200px auto 0;
}

.block {
  height: 0;
  overflow: hidden;
}

.block.a01 {
  height: auto;
}

.inner {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 50px;
}

.btn {
  position: relative;
  width: 300px;
  margin: 20px auto 0;
  padding: 20px 0;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  transition: all 0.7s cubic-bezier(0.2, 0.6, 0.3, 1) 0s;
}

.btn p {
  position: relative;
  line-height: 1;
}

.btn p:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  border: 0px;
  transform: rotate(135deg);
  margin-top: -5px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

.btn .close {
  display: none;
}

.btn p.close:after {
  transform: rotate(-45deg);
}

.btn.max .more {
  display: none;
}

.btn.max .close {
  display: block;
}

@media screen and (max-width:640px){
  .wrap {
    width: 100%;
   }
  .inner {
    max-width: 850px;
  }
}
  

JavaScript

$(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');
        }
      });
    }
  });

});