記事に戻る（Back to Article）

【jQuery】ボタンを押す度に中身が開いていく多段アコーディオンの実装方法のデモページ

※デベロッパーツール等でソースコードをご確認ください（Please check using Developer tools）

English Page

マイナビAGENT

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

スポンサーリンク

マイナビAGENT

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

});