Cara Membuat Acordion dengan Javascript

Acordion adalah dimana ketika kita ingin menampilkan sebuah deskripsi ketika kita memilih sebuah deskripsi yang kita pilih, deskripsi biasanya akan tampil di bawahnya, seperti itulah acordion, sampai sini sudah sedikit bayangan ya teman-teman, dan disini saya akan mencobanya dengan cara membuat acordion dengan Javascript, jadi jangan kemana-mana simak terus ya teman-teman.

jadi untuk membuat acordion kita perlu yang namanya Javascript, karena disini kita bermain dengan sebuah manipulasi tag dan css, jadi dimana deskripsi itu sebenarnya kita sembunyikan dan sebuah button di atas lah yang membuat deskripsi itu tampil lagi, kurang lebih seperti itu, tetapi semua itu kita menggunakan javascipt ya, oke langsung saja, kita lihat cara membuat acordion dengan Javascript.

pertama silahkan teman-teman buat file index.html saja, dengan isi seperti ini.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.container{
			width: 800px;
			margin: auto;

		}
		.panel{
			display: none;
			padding: 20px;
			border: 2px dotted #8e44ad;
			margin: 10px;
		}
		button{
			background: #2980b9;
			border: none;
			width: 100%;
			text-align: left;
			cursor: pointer;
			padding: 10px;
			color: #fff
		}
		.active, button:hover{
			background: #3498db
		}
	</style>
</head>
<body>
<div class="container">
	<h1>Cara Membuat Accordion dengan javascript</h1>
	<article>
		<button>Nama Lengkap</button>
		<div class="panel">
			<u><strong>Nama</strong></u>
			<h1>Robbani Achmad</h1>
		</div>
		<button>Alamat</button>
		<div class="panel">
			<u><strong>Alamat</strong></u>
			<p>Jalan singo sari planet namex</p>
		</div>
		<button>Profile</button>
		<div class="panel">
			<u><strong>Profile</strong></u>
			<h2>Profile 1</h2>
			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
			<h2>profile 2</h2>
			<p>
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</article>
</div>
<script type="text/javascript">
	var button = document.querySelectorAll("button");
	for(var i=0; i<button.length; i++){
		button[i].addEventListener("click", function(){
			this.classList.toggle("active")
			var panel = this.nextElementSibling;
			if(panel.style.display == "block"){
				panel.style.display = "none"
			}else{
				panel.style.display = "block"
			}
		})
	}
</script>
</body>
</html>

Oke silahkan teman-teman copy, dan coba teman-teman perhatikan langsung kode Javascriptnya, jika berhasil teman-teman akan mendapatkan hasil seperti ini.

Silahkan teman-teman coba sendiri ya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat acordion dengan Javascript semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.