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

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

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

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

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

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

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

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

実装所要時間は15分程度

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

});

実装のポイント

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

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク