Accordion이란,
아코디언 악기처럼 왔다갔다하며 내용을 보여주기 때문에 불려지는 메뉴스타일입니다.
한정된 영역 안에서 컨텐츠를 모아볼 수 있고, 열고 닫는 직관적인 인터랙션 덕분에 빈번하게 사용됩니다.

TODO

• [개선사항] 웹접근성 향상 (키보드 조작, WAI-ARIA)
• [개선사항] 애니메이션 및 스타일 향상 (active 및 hover 스타일, 색깔 선정, 아이콘)
• [옵션] autoAnimation : 아이템이 자동 순차적으로 열리게 하는 기능
• [옵션] icon : 아이콘 위치주소만 입력하면 .accordion-head에 삽입해 줌
• [옵션] sortable : 아이템들을 드래그 및 정렬이 가능하도록 하는 기능

Options

HTML

    

      

        

          
Section 1
        
        

          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum neque a velit laoreet dapibus. Etiam eleifend tempus pharetra.
        
      

      

        

          
Section 2
        
        

          
Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
        
      

      

        

          
Section 3
        
        

          
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
        
      

      

        

          
Section 4
        
        

          
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        
      

      

        

          
Section 5
        
        

          
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        
      

      

        

          
Section 6
        
        

          
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
        
      
    
  

처음부터 열려있는 탭을 설정하려면 .accordion-item 요소에 data-opened="true"를 추가합니다.

CSS

/*
 * accordion
 */

/* [높이] fixedHeight */
.accordion.fixed-height .accordion-body { height: 50px; overflow: auto; }

/* [스타일] default */
.accordion .accordion-head {
  border: 1px solid #DDD; border-radius: 4px; color: #333; background-color: #F5F5F5; cursor: pointer;
}
.accordion .active .accordion-head { border-radius: 4px 4px 0 0; }
.accordion .active .accordion-head,
.accordion .accordion-head:hover { border-color: #999; }
.accordion .accordion-head .accordion-txt { font-size: 1.1em; font-weight: bold; }
.accordion .accordion-body { border: 1px solid #999; border-radius: 0 0 4px 4px; color: #666; background: #fff; }

/* [스타일] yellow */
.accordion.style-yellow .accordion-head { border: 1px solid #FFD900; background: #FFF9D7; }
.accordion.style-yellow .accordion-head .accordion-txt { color: #5B4827; }
.accordion.style-yellow .accordion-body { border: 1px solid #FFD900; }

/* [스타일] blue */
.accordion.style-blue .accordion-head { border: 1px solid #CCD5DC; background: #DBE9F7; }
.accordion.style-blue .accordion-head .accordion-txt { color: #555; }
.accordion.style-blue .accordion-body { border: 1px solid #CCD5DC; }

/* [형태] vertical */
.accordion.vertical { width: 70%; }
.accordion.vertical .accordion-item + .accordion-item { margin-top: 3px; } 
.accordion.vertical .accordion-head { padding: 5px 10px; height: 25px; line-height: 25px; }
.accordion.vertical .accordion-head .accordion-txt {  }
.accordion.vertical .accordion-body { padding: 20px; margin: 0; min-height: 50px; border-width: 0 1px 1px 1px; }

/* [형태] horizontal */
.accordion.horizontal { width: 765px; height: 200px; }
.accordion.horizontal:after { content: ""; display: block; clear: both; }
.accordion.horizontal .accordion-item { float: left; }
.accordion.horizontal .accordion-item + .accordion-item { margin-left: 3px; }
.accordion.horizontal .accordion-head { float: left; padding: 10px; width: 30px; height: 180px; border-radius: 4px; }
.accordion.horizontal .accordion-body {
  float: left; padding: 10px; width: 410px; height: 180px; border-width: 1px 1px 1px 0; border-radius: 0 4px 4px 0;
  overflow: auto;
}
.accordion.horizontal .active .accordion-head { border-radius: 4px 0 0 4px; }
.accordion.horizontal .active .accordion-body { display: block; }
  /*크로스부라우징*/
.accordion.horizontal .accordion-head .below-ie8 .accordion-txt { position: absolute; }
.accordion.horizontal .accordion-head .accordion-txt {
  margin-top: 15px; white-space: nowrap; font-weight: bold; /* width: 100px; */
  transform:          rotate(90deg);
  -webkit-transform:  rotate(90deg);
  -moz-transform:     rotate(90deg);
  -o-transform:       rotate(90deg);
  -ms-transform:      rotate(90deg) translateZ(0); /* IE 9 + */
  filter:             progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 6,7 */
}
  

Javascript

/** ==================================================================
 * [ Accordion Plugin - 2014.03.31 ]
 * @Author Kim Ah Reum (kim.ah.rm@gmail.com)
 * @Required jQuery
 * =================================================================== */

;(function($, win, doc) {
  
  $.fn.rfcAccordion = $.rfcAccordion = function(bringOption) {
    var options = $.extend({}, $.fn.rfcAccordion.defaults, bringOption)
      , $this = $(this);

    // 예외처리
    if (options.stack == 'horizontal') {
      options.fixedHeight = false;
      options.multiOpen = false;
    }

    return $this.each(function() {
      var $accordion = $this
        , $items = $accordion.find('.accordion-item')
        , $itemsHead = $items.find('.accordion-head')
        , $itemsBody = $items.find('.accordion-body');

      // [옵션] stack
      if (options.stack == 'vertical') {
        $accordion.addClass('vertical').removeClass('horizontal');
        $itemsBody.hide();
      } else if (options.stack == 'horizontal') {
        $accordion.addClass('horizontal').removeClass('vertical');
        $itemsBody.not('.accordion-item.active .accordion-body').hide();
      }

      // [옵션] fixedHeight
      if (options.fixedHeight === true) {
        $accordion.addClass('fixed-height');
      } else {
        $accordion.removeClass('fixed-height');
      }

      // [옵션] style
      if (options.style == 'yellow') {
        $accordion.addClass('style-yellow').removeClass('style-blue');
      } else if (options.style == 'blue') {
        $accordion.addClass('style-blue').removeClass('style-yellow');
      } else {
        $accordion.removeClass('style-yellow style-blue');
      }

      // [옵션] selectEvent, multiOpen, onAnimation
      $itemsHead.off();
      $itemsBody.off();

      $itemsHead.on(options.selectEvent, function (event) {
        var $thisHeader = $(this)
          , $thisBody = $thisHeader.next()
          , $thisItem = $thisHeader.parent();

        if (options.stack == 'vertical' && options.multiOpen === false) {
          if ($thisBody.css('display') == 'block') {
            $.rfcAccordion.close($thisItem, options.onAnimation);
          } else {
            $.rfcAccordion.close($items.not($thisItem), options.onAnimation);
            $.rfcAccordion.open($thisItem, options.onAnimation);
          }

        } else if (options.stack == 'vertical' && options.multiOpen === true) {
          var bodyClose = $thisBody.css('display') == 'none';
          bodyClose? $.rfcAccordion.open($thisItem, options.onAnimation)
            : $.rfcAccordion.close($thisItem, options.onAnimation);

        } else if (options.stack == 'horizontal') { // horizontal 일때 options.multiOpen는 무조건 false
          if ($thisBody.css('display') == 'block') {
            //
          } else {
            $.rfcAccordion.close($items.not($thisItem), options.onAnimation);
            $.rfcAccordion.open($thisItem, options.onAnimation);
          }
        }
        return false;
      });

      function init() {
        $.rfcAccordion.close($items, false);
        $items.each(function() {
          if ($(this).data('opened') === true) {
            $.rfcAccordion.open($(this), false);
          }
        });
      }
      init();
    });
  };

  $.rfcAccordion.open = function(targetItem, onAnimation) {
    var $targetItem = targetItem.addClass('active')
      , $targetAccordion = $targetItem.parents('.accordion')
      , $targetBody = $targetItem.find('.accordion-body').css({ 'width': '' }); 

    if (onAnimation) {
      if ($targetAccordion.hasClass('vertical')) {
        $targetBody
          .stop()
          .slideDown({ duration : 300, easing : 'linear', queue : true });

      } else if ($targetAccordion.hasClass('horizontal')) {
        $targetBody
          .css({ 'width': '0px' })
          .show()
          .stop()
          .animate({ width: '410px', queue : true }, 300);
      }
    } else {
      $targetBody.show();
    }
  };

  $.rfcAccordion.close = function (targetItem, onAnimation) {
    var $targetItem = targetItem.removeClass('active')
      , $targetAccordion = $targetItem.parents('.accordion')
      , $targetBody = $targetItem.find('.accordion-body').css({ 'width': '' });

    if (onAnimation) {
      if ($targetAccordion.hasClass('vertical')) {
        $targetBody
          .stop()
          .slideUp({ duration : 300, easing : 'linear', queue : true });

      } else if ($targetAccordion.hasClass('horizontal')) {
        $targetBody
          .css({ 'width': '410px' })
          .stop()
          .animate({ 'width': '0px', queue : true }, 1000)
          .hide();
      }
    } else {
      $targetBody.hide();
    }
  };

  $.fn.rfcAccordion.defaults = {
    stack: 'vertical', // 'vertical', 'horizontal'
    fixedHeight: false, // boolean
    multiOpen: false, // boolean
    style: 'default', // 'default', 'yellow', 'blue'
    onAnimation: false, // boolean
    selectEvent: 'click' // 'click', 'mouseenter'
  };

  /* 아코디언 플러그인 적용 */
  $('#accordion1').rfcAccordion({
    stack: 'horizontal',
    fixedHeight: true,
    multiOpen: false,
    accordionStyle: 'yellow',
    onAnimation: false,
    selectEvent: 'click'
  });

})(jQuery, window, document);
  

History

• Accordion 플러그인 제작[김아름 | 2014.02.28]
• 옵션 테스트박스 추가개발 및 적용 / 플러그인 버그 수정[김아름 | 2014.03.31]
• 옵션 테스트박스에 Local Storage 기능 추가 (새로고침 되어도 사용자가 지정한 옵션값 기억)[김아름 | 2014.07.03]