Cara menampilkan atau menyembunyikan konten - Hai, kali ini kita akan belajar menampilkan atau menyembunyikan konten atau biasa dikenal dengan istilah collapse.
Dalam artikel ini kita akan mencoba membuatnya tanpa menggunakan Bootstrap alias murni hanya dengan html, css dan javascript saja.
Pertama kita buat file baru dengan nama collapse.html dan tambahkan HTML didalamnya.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Tampilkan atau sembunyikan konten</h2>
<button class="collapsible">Button 1</button>
<div class="content">
<p>Lorem ipsum …</p>
</div>
<button class="collapsible">Button 2</button>
<div class="content">
<p>Lorem ipsum …</p>
</div>
</body>
</html>Lalu tambahkan kode CSS berikut diatas tag
</head>
<style>
body {
font-family: sans-serif;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
Maka tampilannya akan seperti berikut.
Lanjut, tambahkan script berikut sebelum tag
</body>.
<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>
Sehinggan untuk kode lengkapnya akan seperti berikut.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Tampilkan atau sembunyikan konten</h2>
<button class="collapsible">Button 1</button>
<div class="content">
<p>Button 1 diklik ..</p>
</div>
<button class="collapsible">Button 2</button>
<div class="content">
<p>Button 2 diklik ..</p>
</div>
<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>
</body>
</html>
Coba klik Button 1 dan Button 2 maka tampilannya akan seperti berikut.
Reference: How To - Collapse
0 Komentar