기본코드

Collapsible Block을 이용하기 위해서는 블럭을 만들려는 컨텐츠를 감싸고 있는 div Tag에 data-role="collapsible"을 추가 한다. 이때 div Tag안에 처음 정의된 헤더 테그가 collapsible Block의 타이틀로 사용되며 접힘/펼침을 시각적으로 표현하기 위한 +,- 아이콘이 타이틀 앞에 자동으로 추가 된다. 아이콘 위치는 collapsible Block 내에 data-iconpos=[top, bottom, right, left] 로 변경할 수 있으며, 또한 처음 화면을 로드 할 때 Block이 펼쳐있는 상태를 원할 시에는 감싸고 있는 div Tab에 data-collapsed="false"을 추가한다.

색상변경

색상변경 시에는 data-role="collapsible"이 선언된 div Tag에 Header 색상은 data-theme=[a~g] , 내부 Content 색상은 data-content-theme=[a~g] 를 선언하여 색상을 변경한다.(총 7가지 색상 지원)

형태변경

여러개의 Collapsible Block을 하나의 그룹으로 구성하고 싶다면 이것들을 감싸고 있는 div Tag에 <div data-role="collapsible-set"> 속성을 지정하면 된다.이렇게 그룹으로 구성하면 각 Collapsible Block의 접힘/펼침은 상호 배타적으로 동작한다.

연속적인 Collapsible Block을 형성 할때는 content 영역에 하위 Collapsible Block을 선언한다.