Spoiler Code for a HTML page

Hello, I am trying to create a spoiler for my HTML page. I want it to be really simple, just like FAQ page. I've been trying to search and modify the codes myself, but everything I knew about coding is long forgotten I want to have multiple of them on one page if it matters. Thanks in advance.

Try adding this code @Thistle

Code:

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">[Show]</a><span id="spoiler_id" style="display: none"><a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">[Hide]</a><br>INSERT CONTENT HERE</span>

You can also change where is says [Show] to a different text in that code as well.

Cheers,
James

@Mimikyu, thank you! I've tried inserting two, but only one (the first one) works for me :c

Gotcha @Thistle,
I do apologize that only 1 of those begins to work, I will take a look and give you an update as soon as I can get that fixed!

Cheers,
James

Mimikyu wrote:Gotcha @Thistle,
I do apologize that only 1 of those begins to work, I will take a look and give you an update as soon as I can get that fixed!

Cheers,
James

Thank you very much! I really liked that script (http://www.bloggersentral.com/2013/03/content-spoiler-with-simple-css3.html) but I wanted the design to be very simple (just like the one you provided) and have the ability to choose names for spoilers.

If you are entering more than one spoiler, you will need to give each one a different ID.

@SLGray, I was told that by somebody else and I cannot figure out how to do that? Can you show me if at all possible?

Is is what the second would look like:

Code:

        <a id="show_id2" onclick="document.getElementById('spoiler_id2').style.display=''; document.getElementById('show_id2').style.display='none';" class="link">[Show]</a><span id="spoiler_id2" style="display: none"><a onclick="document.getElementById('spoiler_id2').style.display='none'; document.getElementById('show_id2').style.display='';" class="link">[Hide]</a><br>INSERT CONTENT HERE</span>

SLGray wrote:id="spoiler_id"
id="spoiler_id2"

@SLGray, Thank you! I figured it out!

@Thistle, Try using the code below and seeing if it works.

Code:

<a id="x"
  onclick="document.getElementById('y').style.display='';
            document.getElementById('x').style.display='none';"
  class="link">
  [ShowBlock1]
</a>
<span id="y" style="display: none">
  <a onclick="document.getElementById('y').style.display='none';
              document.getElementById('x').style.display='';"
    class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

<a id="show_id"
  onclick="document.getElementById('spoiler_id').style.display='';
            document.getElementById('show_id').style.display='none';"
  class="link">
  [ShowBlock2]
</a>
<span id="spoiler_id" style="display: none">
  <a onclick="document.getElementById('spoiler_id').style.display='none';
              document.getElementById('show_id').style.display='';"
    class="link">
  [Hide]
  </a>
<br>
INSERT CONTENT HERE
</span>

Cheers,
James

I edited my post.

@SLGray @Mimikyu
Hello again, thank you very much for your help. Everything works fine!