W3.CSS 아코디언
아코디언이 어떻게 작동하는지 보려면 아래의 "섹션 열기" 버튼을 클릭하십시오.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
아코디언
아코디언은 HTML 콘텐츠를 표시(및 숨기기)하는 데 사용됩니다.
w3-hide 클래스를 사용 하여 아코디언 콘텐츠를 숨깁니다.
모든 종류의 버튼을 사용하여 콘텐츠를 열고 닫습니다.
예시
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
아코디언을 여는 데 사용되는 요소와 아코디언의 내용은 모두 HTML 요소가 될 수 있습니다.
아코디언 대 드롭다운
다음 표는 아코디언과 드롭다운의 차이점을 보여줍니다.
| 아코디언 | 쓰러지 다 |
|---|---|
| 콘텐츠가 페이지 콘텐츠를 아래로 밀어냅니다. | 콘텐츠가 기존 페이지 콘텐츠 위에 놓입니다. |
| 콘텐츠 너비가 100%인 경우가 많습니다. | 콘텐츠 너비는 160px(기본값)입니다. |
| 여러 섹션을 여는 데 자주 사용 | 종종 한 섹션을 여는 데 사용됩니다. |
아코디언
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
드롭다운
아코디언 버튼
HTML 요소를 사용하여 아코디언 콘텐츠를 열 수 있습니다. 우리 는 페이지의 전체 너비(100% 너비)에 걸쳐 있는 w3-block 클래스 의 버튼을 선호합니다 .
W3.CSS의 버튼은 기본적으로 중앙에 위치한다는 것을 기억하십시오. 대신 왼쪽 정렬을 원하면 w3-left-align 클래스를 사용하십시오 . 그러나 우리의 접근 방식을 따를 필요는 없습니다. 아코디언은 어느 쪽이든 좋아 보일 것입니다.
Lorem ipsum...
Lorem ipsum...
Centered content as well!
예시
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
활성 아코디언 버튼
JavaScript를 사용하여 열려 있는(클릭) 아코디언을 강조 표시합니다.
Some text..
Some other text..
예시
// Add the w3-red class to all opened accordions
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", "");
}
아코디언 너비
기본적으로 블록의 너비는 100%입니다. 이를 재정의하려면 아코디언 컨테이너의 CSS 너비 속성을 변경합니다.
Some text..
Some text..
Some text..
Some text..
예시
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
아코디언 콘텐츠
링크가 있는 아코디언:
예시
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
목록으로서의 아코디언:
- 처녀
- 이브
- 아담
예시
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
사이드바 안의 아코디언(사이드바에 대한 자세한 내용은 나중에 배우게 됩니다):
예시
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
애니메이션 아코디언
w3-animate- 클래스 중 하나를 사용 하여 아코디언 콘텐츠를 페이드, 확대/축소 또는 슬라이드합니다.
예시
<div id="Demo1" class="w3-hide
w3-animate-zoom">