Spoiler text walkthroughs!

Site Updates forum

Posted on Feb. 7, 2015, 6:10 p.m. by Epochalyptik

This is a relatively minor update, but the content will be useful to those of you working on long deck descriptions or bios. Credit goes to Femme_Fatale, ChiefBell, and hyperlocke for popularizing these methods around the site.

The formatting page now contains walkthroughs for creating spoiler text. The walkthroughs are also provided below for your convenience.

You can use spoiler text to hide large amounts of text until the reader is ready to view it. This technique is perfect for long deck descriptions!

• Text in orange indicates any text that will be visible when the code is implemented. You may customize this text. If this text is the summary or content, it must be contained within <p> and </p> tags. You may add additional paragraphs of text by beginning a new set of <p> and </p> tags.
• Text in light green indicates code that corresponds to the text that must be clicked to reveal the spoiler text. You must change this text for each time you implement the code, and each instance of this text within an implementation of code must be the same. This text must not be the same as the text in yellow.
• Text in yellow indicates code that corresponds to the text that must be clicked to hide the spoiler text. You must change this text for each time you implement the code, and each instance of this text within an implementation of code must be the same. This text may not be the same as the text in light green.

---

Method 1:
This method is more complicated, but it works on all major browsers.

To use, copy and paste the following code verbatim.

<a id="show_id1" onclick="document.getElementById('spoiler_id1').style.display=''; document.getElementById('show_id1').style.display='none';">
<b>SHOW</b></a>
<div id="spoiler_id1" style="display: none">
<a onclick="document.getElementById('spoiler_id1').style.display='none'; document.getElementById('show_id1').style.display='';">
<b>HIDE</b></a>
<br /><br />
<p>Content goes here. The content will be hidden until the "SHOW" text is clicked.</p>
<br />
</div>

Sample:
SHOW

HIDE

Content goes here. The content will be hidden until the "SHOW" text is clicked.

---

Method 2:
This code is like Method 1's code, but it produces buttons instead of link text.

To use, copy and paste the following code verbatim.

<button id="but.1" onclick="document.getElementById('div.1').style.display=''; document.getElementById('but.1').style.display='none';">
Show
</button>
<div id="div.1" style="display: none">
<button onclick="document.getElementById('div.1').style.display='none'; document.getElementById('but.1').style.display='';">
Hide
</button>
<br />
<p>Content goes here. The content will be hidden until the "Show" button is clicked.</p>
</div>

Sample:
Show

Hide

Content goes here. The content will be hidden until the "Show" button is clicked.

---

Method 3:
This method is simpler, but it works on fewer browsers. Firefox and Internet Explorer don't support this method, so users viewing the site with either browser will see broken formatting and all of the text that is supposed to be hidden.

To use, copy and paste the following code verbatim.

<details>
<summary>
Summary goes here. The summary text will be displayed and may be clicked to reveal the spoiler text
</summary>
<p>Content goes here. The content will be hidden until the summary text is clicked.</p>
</details>

Sample (remember, this code is unsupported in Firefox and IE):

Summary goes here. The summary text will be displayed and may be clicked to reveal the spoiler text

Content goes here. The content will be hidden until the summary text is clicked.

---

Go forth and improve your deck descriptions, profile pages, and more! Just try not to use this code unless it's necessary to condense very long content.

hyperlocke says... #2

Thanks, Epoch. These questions came a lot, lately.

February 7, 2015 6:30 p.m.

klone13 says... #3

Thank you so much Epochalyptik

February 7, 2015 10:26 p.m.

mpeach1 says... #4

This is pretty solid

February 7, 2015 10:37 p.m.

Bellock86 says... #5

Sweet. Thanks Epochalyptik.

February 7, 2015 11:33 p.m.

JakeHarlow says... #6

Knowledge acquired.

February 8, 2015 1:26 a.m.

ChiefBell says... #7

Yay for like improving tappedout.

February 8, 2015 5:48 a.m.

BMpatrol says... #8

BEAUTIFUL! I've been waiting for this soooo long!!!

February 8, 2015 5:55 a.m.

Matsi883 says... #9

You don't put the p tag inside the summary tag.

February 8, 2015 7:49 a.m.

dragon_slayer says... #10

Thanks so much, Epochalyptik! This will make my deck descriptions so much neater!

One question though; can you have spoiler text within spoiler text? (For method 3, specifically.)

February 8, 2015 9:11 a.m.

Kryzis says... #11

dragon_slayer it works for all of them.

February 8, 2015 9:27 a.m.

dragon_slayer says... #12

Cool, thanks! I'll try it out!

February 8, 2015 9:30 a.m.

Epochalyptik says... #13

Made a slight modification. I noticed that class="link" isn't necessary because we aren't referring to a defined CSS class.

February 8, 2015 3:08 p.m.

Matsi883 says... #14

Putting the p tag inside your summary tag causes the arrow to be the line above the text.

February 8, 2015 3:18 p.m.

Epochalyptik says... #15

Fixed in 3.

February 8, 2015 3:47 p.m.

Rayenous says... #16

Cool!!

Now I can help people who regularly ignore me by allowing them to simply not see my comments in the first place.

February 11, 2015 7:40 a.m.

Kryzis says... #17

Epochalyptik - I was looking at the Format Tips and I noticed that something was wrong.

Look at the middle row:

Should be [ [ symbol:GW ] ]

February 22, 2015 6:28 p.m.

Quarion65 says... #18

Help! Whenever I try to put the spoiler text stuff into my deck desricptions the text doesn't open, but when I click the button elsewhere it works fine. Is your formatting wrong?

September 11, 2015 7 p.m.