---
id: w3css-accordions
title: "W3CSS Accordions"
category: "Programming_Language"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["accordion vs dropdown", "w3-hide", "w3-show", "W3.CSS 아코디언"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["w3css", "css-framework", "w3schools", "accordion"]
raw_sources: ["https://www.w3schools.com/w3css/w3css_accordions.asp"]
applied_in: []
github_commit: ""
---

# [[W3CSS Accordions]]

## 🎯 한 줄 통찰 (One-line insight)
The source draws an explicit structural line between accordions and dropdowns via a comparison table: accordions PUSH page content down and are typically full-width / open-multiple-sections, while dropdowns LAY OVER existing content, are typically 160px, and are usually one-at-a-time — meaning the choice between them is a layout decision (push vs overlay), not merely a stylistic one. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`w3-hide`** — hides accordion content by default; JavaScript toggles a `w3-show` class to reveal it (identical toggle mechanism to `w3-dropdown-click`). [S1]
- **Any element can trigger or hold content** — buttons, links, or plain elements all work as accordion triggers. [S1]
- **`w3-block` + `w3-left-align`** — recommended combo for full-width, left-aligned accordion trigger buttons (buttons are center-aligned by default in W3.CSS). [S1]
- **Active-state highlighting** — JS can additionally toggle a color class (e.g. `w3-red`) on the trigger button via `previousElementSibling`, visually marking which section is open. [S1]
- **Nested composition** — accordions can be embedded inside a `w3-sidebar`, alongside a `w3-dropdown-click`, mixing all three navigation patterns in one component. [S1]

## 📖 세부 내용 (Details)
- Basic accordion toggle: `<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">Open Section 1</button><div id="Demo1" class="w3-container w3-hide">...</div>` with the same `w3-show` toggle function pattern as dropdowns. [S1]
- Active-button highlighting: `x.className += " w3-show"; x.previousElementSibling.className += " w3-red";` — colors the trigger button red only while its section is open. [S1]
- Overriding default width: `<div class="w3-light-grey" style="width:50%"><button onclick="myFunction('Demo1')" class="w3-button w3-block">50%</button>...</div>`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **아코디언 vs 드롭다운 사용 목적 차이**: 아코디언은 콘텐츠를 밀어내며 다중 섹션을 여는 데, 드롭다운은 콘텐츠 위에 덮이며 단일 섹션을 여는 데 주로 쓰인다는 명시적 구분표가 제공됨. [S1]

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다 — 사이드바 안에 아코디언과 드롭다운을 함께 중첩시키는 복합 네비게이션 패턴이 실전 UI 구성의 대표 사례다. [S1]

## 💻 코드 패턴 (Code patterns)
Highlighting the active accordion trigger button while its section is open (JavaScript):
```javascript
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
  x.className += " w3-show";
  x.previousElementSibling.className += " w3-red";
} else {
  x.className = x.className.replace("w3-show", "");
  x.previousElementSibling.className =
    x.previousElementSibling.className.replace("w3-red", "");
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3.CSS Tutorial]]
- **관련 개념:** [[W3CSS Dropdowns]], [[W3CSS Navigation]], [[W3CSS Sidebar]]
- **참조 맥락:** 콘텐츠 표시/숨김 토글 패턴의 두 번째 형태(드롭다운과 대비) — 네비게이션 바(Navigation) 챕터로 이어짐.

## 📚 출처 (Sources)
- [S1] W3Schools — W3.CSS Accordions — https://www.w3schools.com/w3css/w3css_accordions.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Accordions" page (Astra wiki-curation, P-Reinforce v3.1 format).
