Cara Membuat Show/Hide di HTML
JavaScript dan HTML memang memiliki banyak sekali fungsi di sebuah halaman web atau dokumen HTML. Dan salah satu contohnya adalah membuat show/hide (menampilkan/menyembunyikan) suatu objek menggunakan JavaScript dan HTML.
Nah jadi, berikut ini adalah cara membuat show hide di HTML dan JavaScript:
Langkah Ke-1
Tambahkan kode Javascript berikut di dalam Tag </script>function myFunction() {
var x = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}}Langkah Ke-2
Untuk menjalankan JavaScript di atas, Anda hanya perlu menambahkan kode HTML berikut di antara tag <body><button onclick="myFunction()">Show/Hide</button>
<p id="demo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>Keterangan:
- Tag <button onclick="myFunction()"> berfungsi untuk mengeksekusi/memanggil fungsi JavaScript di atas.
- Tag <p id="demo"> adalah tempat untuk menampilkan hasil dari JavaScript setelah <button onclick="myFunction()"> di klik.
Penulisan Lengkap:
Nah untuk penulisan Lengkap dari kode html dan javascript diatas seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cara Membiat Show/Hide dengan HTML dan JavaScript - Bang Feri Blog</title>
</head>
<body>
<button onclick="myFunction()">Show/Hide</button>
<p id="demo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}}
</script>
</body>
</html>
ok
ReplyDelete