Back to Article

【jQuery】How to implement a multi-stage accordion whose contents open each time you press the button（Demo page）

※Please check using Developer tools

Japanese 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

Sponsored links

CSS

.wrap {
  width: 768px;
  margin: 100px 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');
        }
      });
    }
  });

});