아코디언 만드는 방법에 대해 자세히 알아보기 (collapsible content) .
아코디언
당신이 숨어 및 콘텐츠의 많은 양을 보여주는 사이를 전환 할 때 아코디언 유용합니다 :
LOREM의 ipsum의의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. UT enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의의 NiSi 유타 aliquip 전직 EA의 commodo의 consequat.
LOREM의 ipsum의의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. UT enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의의 NiSi 유타 aliquip 전직 EA의 commodo의 consequat.
LOREM의 ipsum의의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. UT enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의의 NiSi 유타 aliquip 전직 EA의 commodo의 consequat.
아코디언 만들기
1 단계) HTML을 추가합니다 :
예
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>
<button class="accordion">Section
2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>2 단계) CSS를 추가 :
아코디언 스타일 :
예
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note:
hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
display: none;
}
/* The "show" class is added to the
accordion panel when the user clicks on one of the buttons. This
will show the panel content */
div.panel.show {
display: block !important;
}3 단계) 자바 스크립트를 추가합니다
예
/* Toggle between adding and removing the
"active" and "show" classes when the user clicks on one of the
"Section"
buttons. The "active" class is used to add a background color to the
current button when its belonging panel is open. The "show" class is used to open the
specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick =
function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
} »그것을 자신을 시도 애니메이션 아코디언
을 다음과 같이 변경합니다 panel 및 show 애니메이션 아코디언을 만들기 위해 클래스.
이 아래로 아코디언 슬라이드를 만들 것입니다 (max-height) 와 페이드 (opacity) :
예
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition:
0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height:
500px; /* Whatever you like, as long as its more than the height of the
content (on all screen sizes) */
}
»그것을 자신을 시도 아이콘 추가
접을 수있는 내용의 개폐 여부를 표시하기 위해 각 버튼에 기호를 추가 :
예
button.accordion:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}
»그것을 자신을 시도