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

デモページ

デモページはこちらから

• デモページ

仕組み

コンテンツを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();
});