Spoiler In HTML With JavaScript


If you are active in many forums on the internet, you probably have known the word "spoiler". Yuph. Spoiler is used in many forums to hide some contents and we as the user may open/close it according to our desires.

Now... How if you want to implement the "spoiler" thingy in your website? It is so easy. Please follow the steps below:
  1. Make New HTML File
    You have to make new HTML file. E.g: " spoiler.html ". After that, open that file by using notepad or notepad++ or any other code-editor-software that you have installed in your computer.
  2. Copy The Codes Below
    Please copy and paste the codes below to the 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>
Once you've done it, save the file and open the file in your web browser.
Good luck...

Labels: , , , , , , , ,