Dowiedz się, jak tworzyć akordeon (collapsible content) .
Akordeon
Akordeony są użyteczne, gdy chcemy, aby przełączać między ukryciu i wykazujące dużą ilość treści:
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed nie eiusmod tempor incididunt ut Labore i dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed nie eiusmod tempor incididunt ut Labore i dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed nie eiusmod tempor incididunt ut Labore i dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
Tworzenie akordeon
Krok 1) Dodaj HTML:
Przykład
<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>Krok 2) Dodaj CSS:
Styl na akordeonie:
Przykład
/* 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;
}Krok 3) Dodaj JavaScript:
Przykład
/* 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");
}
} Spróbuj sam " Animowane Akordeon
Wprowadzić następujące zmiany do panel i show zajęciach, aby animowany akordeonie.
Spowoduje to, że slajd akordeon dół (max-height) i zanikać w (opacity) :
Przykład
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) */
}
Spróbuj sam " Dodaj Icons
Dodaj symbol do każdego przycisku, aby wskazać, czy składany treść jest otwarty lub zamknięty:
Przykład
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 (-) */
}
Spróbuj sam "