Pelajari cara membuat akordeon (collapsible content) .
Akordeon
Akordion berguna ketika Anda ingin beralih antara menyembunyikan dan menampilkan sejumlah besar konten:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed jangan eiusmod tempor ut incididunt labore et 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 jangan eiusmod tempor ut incididunt labore et 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 jangan eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Buat Sebuah Accordion
Langkah 1) Tambah HTML:
Contoh
<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>Langkah 2) Tambah CSS:
Gaya akordeon:
Contoh
/* 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;
}Langkah 3) Tambah JavaScript:
Contoh
/* 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");
}
} Cobalah sendiri " animasi Accordion
Membuat perubahan berikut ke panel dan show kelas, untuk membuat animasi akordeon.
Ini akan membuat akordeon geser ke bawah (max-height) dan memudar dalam (opacity) :
Contoh
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) */
}
Cobalah sendiri " Tambahkan Ikon
Tambah simbol untuk masing-masing tombol untuk menunjukkan apakah konten dilipat terbuka atau tertutup:
Contoh
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 (-) */
}
Cobalah sendiri "