Cara Membuat Toggle Tampilkan atau Sembunyikan

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 23, 2021

Di bawah ini kita akan mempelajari cara membuat toggle yang dapat menyembunyikan dan menampilkan elemen dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: yellow;
  margin-top: 20px;
}
</style>
</head>
<body>

<p>Klik tombol di bawah untuk meliahat efek toggle hide and show elemen DIV:</p>

<button onclick="myFunction()"> Contoh Toggle Hide dan Show</button>

<div id="myDIV">
Div elemen yang akan di tampilkan atau di sembunyikan.
</div>

<p><b>Catatan: </b> Elemen tidak akan menempati ruang apa pun saat properti tampilan disetel ke "tidak ada".</p>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

Toggle (Sembunyikan / Tampilkan) sebuah Elemen

Langkah 1) Tambahkan HTML:
Contoh

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  elemen DIV
</div>

Langkah 2) Tambahkan JavaScript:
Contoh

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}