コンテンツを横にアコーディオンで表示させるjQuery

jQueryを使って、コンテンツを横にアコーディオン状に表示するものを作成しました。

ナビゲーションで縦のアコーディオン状のものを作成することはよくあるのですが、コンテンツの中身は1つだけ見えていて他は見出しのみ見えていているような形を見かけたので作成してみようと思いました。

デモページ

デモページ

仕組み

コンテンツをabsoluteで横並びにし、クリックした見出しによって動くコンテンツを決めつつ移動させてます。 あと、overflow: hidden;で横ではみ出てる部分を表示させないようにしています。

横幅など変わったら調整がいるかもしれませんが、ひとまずこちらで動いたのでこれで。

HTML

<div class="acdion">
  <div class="pleat">
    <h2 class="title">コンテンツ01</h2>
    <div class="txt">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iusto fuga repellendus, reprehenderit accusamus sapiente, enim quidem officia dolore error quae corporis, tenetur maiores, beatae. Maxime odio natus laboriosam necessitatibus.</p>
    </div>
  </div>
  <div class="pleat">
    <h2 class="title">コンテンツ02</h2>
    <div class="txt">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iusto fuga repellendus, reprehenderit accusamus sapiente, enim quidem officia dolore error quae corporis, tenetur maiores, beatae. Maxime odio natus laboriosam necessitatibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iusto fuga repellendus, reprehenderit accusamus sapiente, enim quidem officia dolore error quae corporis, tenetur maiores, beatae. Maxime odio natus laboriosam necessitatibus.</p>
    </div>
  </div>
  ～～中略～～
</div>

CSS

アコーディオンに関する指定の抜粋です。

.acdion {
  height: 400px;
  position: relative;
}

.pleat {
  width: 500px;
  height: 100%;
  overflow: hidden;
  background: #eee;
}

.pleat h2 {
  width: 40px;
  height: 100%;
  float: left;
  background: #009c84;
  cursor: pointer;
}

.pleat .txt {
  padding: 15px;
  overflow: auto;
  zoom: 1;
}

JavaScript

(function($){
  $.fn.acdion = function(options){
    var wrap =  $(this);

    $(window).load(function() {
      var inner = wrap.children('.pleat');
      var innerWidth = inner.width();
      var innerNum = inner.length;
      var title = $(inner).children('.title');
      var titleWidth = new Array();
      for(var n = 0 ; n < innerNum ; n++ ){
        titleWidth[n] = $(inner).eq(n).children('.title').width();
      };
      var totalWidth = 0;
      for (var i = 0; i < innerNum; i++) {
        totalWidth += titleWidth[i]
      };
      var contentWidth = inner.eq(0).children('.txt').width();
      wrap.css({
        'overflow': 'hidden',
        'width': innerWidth + totalWidth - titleWidth[0]
      });
      inner.css({
        'position' : 'absolute',
        'top' : '0'
      });
      for (var i = 0 ; i < innerNum; i++) {
        if(i == 0){
          inner.eq(i).css({
            'left' : 0
          });
        }else if(i == 1){
          inner.eq(i).css({
            'left' : innerWidth
          });
        }else {
          inner.eq(i).css({
            'left' : innerWidth + ( titleWidth[i] * ( i - 1) )
          });
        }
      };
      inner.eq(0).addClass('active');
      var moveDistance = 0;
      $(title).on('click', title, function() {
        if($(this).parent().hasClass('active')){
          var clickNum = $(this).parent('.pleat').index();
          for (var d = innerNum ; d > clickNum; d--) {
            if(d == 0){
              inner.eq(d - 1).css({
                'left' : 0
              });
            }else if(d == 1){
              inner.eq(d).animate({
                'left' : innerWidth
              });
            }else {
              title.parent(inner).eq(d).animate({
                'left' : innerWidth + ( titleWidth[d - 1] * ( d - 1) )
              }).removeClass('active');
            }
          };
        }else {
          var clickNum = $(this).parent('.pleat').index();
          for (var c = 0; c < clickNum; c++) {
           moveDistance = moveDistance + titleWidth[c]
           inner.eq(c + 1).animate({
             'left': moveDistance
           }, 'slow',function(){
             $(this).addClass('active')
           });
         };
         moveDistance = 0;
       }
     });
   });
 }
})(jQuery);

$(function(){
  $('.acdion').acdion();
});

転載元の記事

コンテンツを横にアコーディオンで表示させるjQuery