Bagaimana caranya - Ciutkan
Pelajari cara membuat bagian yang dapat diciutkan.
bisa dilipat
Klik tombol untuk beralih antara menampilkan dan menyembunyikan konten yang dapat diciutkan.
Beberapa konten yang dapat dilipat. Klik tombol untuk beralih antara menampilkan dan menyembunyikan konten yang dapat diciutkan. Rasa sakit itu sendiri penting, tetapi rasa sakit itu ditingkatkan oleh proses adipiscing, tetapi saya memberikan waktu untuk menguranginya sehingga saya melakukan beberapa pekerjaan dan rasa sakit yang hebat. Agar sebagian besar, salah satu dari kita akan melakukan jenis pekerjaan apa pun kecuali untuk mengambil keuntungan dari tujuan dari itu.
Buat yang Dapat Dilipat
Langkah 1) Tambahkan HTML:
Contoh
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Langkah 2) Tambahkan CSS:
Gaya akordeon:
Contoh
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* 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) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
Langkah 3) Tambahkan JavaScript:
Contoh
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display
=== "block") {
content.style.display =
"none";
} else {
content.style.display = "block";
}
});
}
Animated Collapsible (Geser ke Bawah)
Untuk membuat animasi dapat dilipat, tambahkan max-height: 0
, overflow: hidden
dan a transition
untuk properti max-height, ke panel
kelas.
Kemudian, gunakan JavaScript untuk menggeser konten ke bawah dengan menyetel kalkulasi
max-height
, bergantung pada tinggi panel pada ukuran layar yang berbeda:
Contoh
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var
coll =
document.getElementsByClassName("collapsible");
var i;
for (i = 0; i <
coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight =
content.scrollHeight + "px";
}
});
}
</script>
Tambahkan Ikon
Tambahkan simbol ke setiap tombol untuk menunjukkan apakah konten yang dapat dilipat terbuka atau tertutup:
Contoh
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}