# 아코디언 (Accordions)메뉴

날짜:
# 아코디언 (Accordions)메뉴
 - 슬라이드 메뉴와 같이 파일철을 펼치는 듯한 인터페이스
 - 참고 링크: [링크] http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible-set.html


# 예제 - 아코디언 사용법

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

</head>
<body>
<!-- Start of second page -->
<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>저는 section 1 입니다.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>저는 section 2 이구요.</p>
</div>
</div>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>

</html>

 - data-collapse가 false이면, 기본으로 펼쳐진다.

 - 결과