Metanet Forums

I'm making a web page and would very much like spoilers on it, but I have no idea how to make them. Would anyone be able to tell me how to make spoilers that expand/contract when certain text is clicked (as similar to the ones on the forums as possible)? I want many on a page so each one can't trigger the same hidden text, as what I tried before only opened the same spoiler no matter what I clicked.

Here is what I already had, although I expect it to be completely wrong (paste it into something like here to test it).

Code: Select all

<html><head>
<script type="text/javascript">function Spoiler(obj) { var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = "";
else inner.style.display = "none"; }</script>
</head>
<body><div><input type="text" onclick="Spoiler(this);" value="Text" />
<div style="display:none;">Hidden text</div>
</div></body></html>

Thanks

Yeah, but your code is exactly right. o_O Here's what I was testing. Works perfectly:

Code: Select all

<html>
<head>
  <script type="text/javascript">
    function Spoiler(obj)
    {
      var inner = obj.parentNode.getElementsByTagName("div")[0];
      if (inner.style.display == "none") {
        inner.style.display = "";
      } else {
        inner.style.display = "none";
      }
    }
  </script>
</head>
<body>
  <div>
    <input type="text" onclick="Spoiler(this);" value="Text1" />
    <div style="display:none;">Hidden text</div>
  </div>
  <div>
    <input type="text" onclick="Spoiler(this);" value="Text2" />
    <div style="display:none;">Hidden text</div>
  </div>
  <div>
    <input type="text" onclick="Spoiler(this);" value="Text3" />
    <div style="display:none;">Hidden text</div>
  </div>
</body>
</html>

Why do you use an input field to do this? Wouldn't this work with a <p>aragraph as well?

Metanet Forums

Spoilers

Spoilers

Re: Spoilers

Re: Spoilers