Hide show di sebuah program web dev menjadi cukup populer di kalangan programmer baik javascript ataupun jquery. Kali ini aku coba buat bagaimana source kode toggle javascript.
Langsung aja berikut source kodenya.
Source kode hide show toggle dengan javascript.
Cukup copas dan buat dokumen baru dengan format HTML.
<!DOCTYPE html>
<html>
<head>
<!-- TEMPAT STYLE -->
<style>
button{background-color: red;padding: 15px;border-radius: 3px;color: #fff;border: none;}
#xcode {width: 100%;padding: 50px 0;text-align: center;background-color: #0909;margin-top: 20px;color: #fff;}
</style>
</head>
<body>
<!-- Tombol -->
<button onclick="myFunction()">Hide/show</button>
<!-- Yang akan dishow dan hide -->
<div id="xcode">
Ini adalah text yang akan di hide dan show
</div>
<!-- Javascript hide show toggle -->
<script>
function myFunction() {
var csscode = document.getElementById("xcode");
if (csscode.style.display === "none") {
csscode.style.display = "block";
} else {
csscode.style.display = "none";
}
}
</script>
</body>
</html>
Jika bingung lihat demo saja.
Sekian artikel membuat hide show toggle dengan javascript kali ini.
Tags:
lainnya