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: , , , , , , , ,