아코디언
아코디언은 섹션으로 나뉩니다 콘텐츠를 표시 (숨길)하는 데 사용됩니다.
어떻게 작동하는지 보려면 아래 "열기 절"버튼을 클릭합니다 :
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
이미지와 아코디언 :
Trolltunga, 노르웨이
W3-아코디언 클래스 아코디언 정의하고 W3-아코디언 콘텐츠 클래스가 표시되는 부분을 정의한다 :
예
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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 요소가 될 수 있습니다.
드롭 다운 대 아코디언
아래 목록은 아코디언과 드롭 다운의 차이를 보여줍니다
아코디언
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
- 함유량이 100 %의 폭 (친 요소의 전체 폭에 걸쳐)
- 열릴 때, 아래쪽 페이지 콘텐츠를 푸시있는 경우 (위치 : 기준)
- 종종 여러 섹션을 "열기"하는 데 사용
아코디언 버튼
당신은 아코디언의 내용을 열 어떤 HTML 요소를 사용할 수 있습니다. 그냥 아코디언 내용 (100 % 폭)처럼, 부모 요소의 전체 폭에 걸쳐 있기 때문에 우리는 W3-btn을 블록 클래스와 버튼을 선호한다. W3.CSS의 버튼은 기본적으로 중앙에 있음을 기억하십시오. 당신이 그들을 대신 왼쪽으로 정렬하려는 경우 W3-왼쪽 정렬 클래스를 사용합니다. 그러나, 당신은 우리의 접근 방식을 수행 할 필요가 없습니다 - 아코디언 좋은 하나의 방법을 볼 것이다 :
ipsum의가 lorem ...
ipsum의가 lorem ...
뿐만 아니라 콘텐츠를 중심으로!
예
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>활성 아코디언 버튼
(클릭) 열려있는 아코디언을 강조하기 위해 자바 스크립트를 사용하여
일부 텍스트 ..
다른 텍스트 ..
예
// 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 %이다. 이 메소드를 오버라이드 (override)하기 위해, W3-아코디언 컨테이너의 CSS 폭 속성을 변경 :
일부 텍스트 ..
일부 텍스트 ..
일부 텍스트 ..
일부 텍스트 ..
예
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>아코디언 내용
링크 아코디언 :
예
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>목록과 카드 등의 아코디언 :
- 처녀
- 이브
- 아담
예
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Sidenav 내부 아코디언(참고 : 나중에 측 내비게이션에 대한 자세한 내용은 것) :
예
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>애니메이션 아코디언
아코디언 콘텐츠, 줌 또는 슬라이드 퇴색 할 W3-animate- 클래스 중 하나를 사용 :