jQuery Mobile 접이식 패널 — collapsible 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 접이식 패널 —
data-role="collapsible" 완전 정리

제목을 누르면 본문이 펼쳐졌다 접혔다 하는 패널

시작 오늘 분석할 코드

일반 div에 data-role="collapsible"만 붙이면 안의 첫 헤더(h1~h6)가 클릭 가능한 제목 띠가 되고 나머지 컨텐츠는 펼쳐졌다 접혔다 하는 토글 영역이 된다.

<div data-role="collapsible"> <h3>접이식 패널제목</h3> <p>패널 내용</p> </div> <div data-role="collapsible"> <h3>접이식 패널제목</h3> <h6>일반제목</h6> <p>패널 내용</p> </div>

실제 출력 미리보기

header 영역

▼ 접이식 패널제목

패널 내용

▼ 접이식 패널제목

일반제목

패널 내용

footer 영역

---

용어 핵심 키워드

data-role="collapsible"접이식 패널 마커 — div를 토글 패널로 변환

첫 번째 h*제목 띠 — 클릭 시 본문 토글

나머지 콘텐츠접혔다 펼쳤다 하는 본문 영역

+/− 아이콘자동 추가 — 현재 상태 표시

---

1 어떻게 동작하는지

jQM은 data-role="collapsible"이 붙은 div를 만나면 다음 작업을 자동으로 한다.

• div 안의 첫 번째 h1~h6 태그를 찾아 제목 띠로 변환
• 제목 앞에 +/− 아이콘을 자동으로 붙임 (펼침/접힘 표시)
• 제목 클릭 이벤트를 걸어 본문 영역 표시/숨김 토글
• 기본 상태는 접힘(closed) — 처음에는 제목만 보임

---

2 두 번째 패널 — h6 위치 차이

두 번째 패널은 h3 다음에 h6이 있다. 어떤 일이 일어날까?

• 첫 h3 → 클릭 가능한 제목 띠로 변환
• 두 번째인 h6 → 일반 제목으로 본문 안에 표시 (변환 안 됨)

💡 규칙 — 첫 번째 h*만 제목 띠가 된다. 그 다음 h*는 본문 콘텐츠 안의 일반 텍스트로 다뤄진다.

---

3 처음부터 펼쳐 보이고 싶다면

기본은 접힘 상태다. 처음부터 펼쳐 보이게 하려면 data-collapsed="false"를 추가한다.

<div data-role="collapsible" data-collapsed="false"> <h3>처음부터 펼쳐진 패널</h3> <p>바로 보이는 내용</p> </div>

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
div에 h* 없음	제목 띠 없이 단순 div로 보임	꼭 첫 자식으로 h*를 둠
h* 두 개 모두 제목 기대	두 번째는 본문에 들어감	패널 두 개로 분리
제목 띠 클릭해도 토글 안 됨	jQM JS 미로딩	jquery.mobile-1.4.5.min.js 확인

---

5 현대식 대안

HTML5 표준에는 같은 동작을 하는 <details>·<summary> 태그가 있다. 별도 라이브러리 없이 브라우저가 토글을 처리해 준다.

<details> <summary>접이식 패널제목</summary> <p>패널 내용</p> </details>

---

핵심 한 줄 요약

data-role="collapsible"접이식 패널 — div의 첫 h*가 토글 제목

기본 상태접힘 — 클릭하면 펼쳐짐

data-collapsed="false"처음부터 펼쳐 보이기

현대식<details>/<summary> — 같은 동작 표준

Tags

#jQuery-Mobile #collapsible #data-role #data-collapsed #접이식 #토글 #아코디언 #details #summary #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, collapsible, data-role, data-collapsed, 접이식, 토글, 아코디언, details, summary, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리