Spoiler di HTML Menggunakan JavaScript


Kalau anda aktif di forum-forum di internet, mungkin kata "spoiler" sudah tidak asing lagi. Yuph. Spoiler digunakan di banyak forum-forum internet untuk menyembunyikan sesuatu dan bisa dimunculkan sesuai keinginan viewer.

Nah... Bagaimana kalau anda ingin membuat spoiler di website anda? Caranya sangat mudah. Silahkan ikuti langkah-langkah berikut ini:
  1. Buat File HTML Baru
    Hal pertama yang perlu anda lakukan adalah membuat satu file html baru. Contoh: " spoiler.html ". Setelah itu, buka file tersebut di notepad atau notepad++ atau software code editor lain yang anda miliki.
  2. Copy Code Berikut
    Silahkan copy dan paste code berikut ini di dalam file spoiler.html
    <html>
<head>
    <title>Spoiler in HTML With JavaScript</title>
    <style type="text/css">
body,input
    {
    font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
    <script type="text/javascript">
function spoiler(object)
    {
    var inner = object.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>
</head>
<body>
<h1>Spoiler in HTML With JavaScript</h1>
<div class="spoiler">
    <input type="button" onclick="spoiler(this);" value="Open/Close" />
    <div class="inner" style="display:none;">
    The content inside the spoiler.
    </div>
</div>
</body>
</html>
Setelah anda selesai, simpan file tersebut dan buka di internet browser anda.
Selamat Mencoba...

Labels: , , , , , , , ,