Membuat efek Accordion Collapse dengan CSS dan Javascript
Membahas mengenai desain web memang tak ada habisnya, banyak desain desain modern yang bermunculan membangun kita lebih termotivasi bagi mempelajari dan membangun pun hal baru tersebut. Klai ini saya akan menshare bagaimana cara Membuat efek Accordion Collapse dengan CSS dan Javascript, baiklah seketika saja teman teman kita praktekan yah..
Buka text editor masing masign dan ketikan kode HTML di bawah ini dan beri nama file dengan nama index.html dan simpan file tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Accordion Effect Cool</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body>
<div class=container>
<h2 style=text-align: center;>Efek Accordion CSS dan Javascript</h2>
<p style=text-align: center;>Klik setiap Judul, karenanya efek akan berjalan</p>
<button class=accordion>Judul 1</button>
<div class=panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class=accordion>Judul 2</button>
<div class=panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class=accordion>Judul 3</button>
<div class=panel>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div> <!-- container -->
</body>
</html>
setelah tag div penutup class container ketika kode java script di bawah ini yah teman teman.
<script>
var acc = document.getElementsByClassName(“accordion”);
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle(“active”);
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + “px”;
}
}
}
</script>
setelah itu kalian bikin file css nya dan beri nama dengan nama style.css lalu simpan sejajar dengan file HTML yang kita bikin tadi..
.container{
width: 900px;
margin: auto;
font-family: arial;
}
button.accordion {
background-color: #e9d460;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #6C7A89;
color: #fff;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}setelah selesei hasilnya seperti gambar di bawa ini.
baiklah sekianlah panduan Membuat efek Accordion Collapse dengan CSS dan Javascript ini, semoga bermanfaat.. keep coding 😀
Sumber https://kursuswebsite.org
