Main menu

jQuery UI 강좌 | Widgets > .accordion()

설명

.accordion()으로 제목을 클릭하면 내용이 펼쳐지는 아코디온 효과를 만들 수 있습니다.

문법

$( 'selector' ).accordion( {
  option1: value1,
  option2: value2,
  ...
} );

selector 안의 요소 중 홀수번째 요소가 제목, 짝수번째 요소가 내용이 됩니다.

다른 문법과 다양한 옵션은 http://api.jqueryui.com/accordion/에 있습니다. 아래의 최소한의 옵션을 사용한 간단한 예제입니다.

예제 1

기본값만을 사용한 예제입니다.

첫번째 항목이 펼쳐져 있고, 닫혀진 항목의 제목을 클릭하면 펼쳐지고, 펼쳐진 항목의 제목을 클릭하면 아무 일도 생기지 않습니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-accordion-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( '#jb-accordion' ).accordion();
      } );
    </script>
  </head>
  <body>
    <div id="jb-accordion">
      <h3>Lorem</h3>
      <div>
        <p>Lorem Ipsum Dolor</p>
      </div>
      <h3>Ipsum</h3>
      <div>
        <p>Lorem Ipsum Dolor</p>
      </div>
      <h3>Dolor</h3>
      <div>
        <p>Lorem Ipsum Dolor</p>
      </div>
    </div>
  </body>
</html>

예제 2

active 옵션으로 처음 로딩시 펼쳐질 항목을 정할 수 있습니다. 두번째 항목이 펼쳐져있게 하려면 1, 세번째 항목이 펼쳐져있게 하려면 2로 설정합니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-accordion-02.html

$( '#jb-accordion' ).accordion( {
  active: 1,
} );

예제 3

모든 항목이 닫혀있는 상태에서 시작하는 예제입니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-accordion-03.html

$( '#jb-accordion' ).accordion( {
  active: false,
  collapsible: true,
} );

Created on 2015-10-16 | Updated on 2015-10-16

이 글을 공유하기

Kakao