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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 CSS,JavaScriptの記述内容
5 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作におけるアコーディオンに関する内容です。ボタンを押す度に中身が開いていく多段アコーディオンを実装する方法についてご紹介します。アコーディオンの下部にあるボタンを押していくと中身が展開する仕組みはありそうで、ないのではないかと思います。

コーディングテクニックの使いどころ

ページ内で非常に多くのテキストがある時などに「続きを読むボタン」として機能させると効果的です。ボタンを押す度にコンテンツを表示できるので小説やコラムとも相性は良いです。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は15分程度

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

>> ページの読み込みが遅い場合はこちら

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

});