A Primer on Expandable Text

TappedOut forum

Posted on Jan. 19, 2014, 6:54 a.m. by Matsi883

Once upon a time

Cyrrus had code for text. When you click on that text, it changes, and new text appears. You can see the code on the bottom of his page, and now in many other pages too. So many people are asking for it (I did, it's on my page). So I thought I would put the code in this primer, as a location for anyone that wants to see it. Here is what Cyrrus says about it:

  • "LB and RB need to be replaced with the left and right triangular brackets (< and >).
  • You must have a unique name for "spoiler_id" and "show_id" every time you use this code.
  • I have spaced the code out (and colored it) as that it's easier to interpret but when using it you must put it on a single line (and have it not be colored).
  • If my display code puts spaces in then remove them.

Code

LBa id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link"RB
Show button text
LB/aRB
LBspan id="spoiler_id" style="display: none"RBLBa onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link" RB
Hide Button Text
LB/aRB
LBbrRB
Spoiler Content
LB/spanRB

Any questions? Post here. Also, remember that once you're finished with the code, refresh the page or it won't show.

smash10101 says... #2

It usually doesn't work in preview pages. Refreshing doesn't help that.

January 19, 2014 7:22 a.m.

Matsi883 says... #3

OhI see that, but in descriptions and on pages, it works fine.

January 19, 2014 7:24 a.m.

Cyrrus says... #4

Thanks man. Now I can just refer people here :)

January 23, 2014 2:50 a.m.

Dreno33 says... #5

Thanks Matsi883, for once I got it to work. However, How do I put multiple lines in the "spoiler section"

If I want there to be a break in the paragraph with a gap (like this paragraph from the one above to here, I have to have an empty line spacing it apart. Well, if I do that in the HTML code it doesn't work and if I don't space it it'll look like crap. Thoughts on how to fix this? or maybe your master can share a few ideas?

April 6, 2014 10:15 a.m.

Matsi883 says... #6

There's HTML for that: the br tag.

The way I spaced this was < br >< br >
and this was seperated by < br >.

EDIT (but not really): Was that what you were looking for, or is the problem that that doesn't work.

April 6, 2014 1:52 p.m.

This discussion has been closed