Gendou.com Forum: Programming: Simple HTML Code for [Show/Hide] spoilers.

Simple HTML Code for [Show/Hide] spoilers.

Link | by

on 2010-07-16 20:01:08 (edited 2010-07-16 22:03:26)

_______________________________________________________

Hi hi.
I've always been wondering why there's only "Show" spoiler code in Gendou...
and then I ended up making a "Show/Hide" code by modificating the "Show" code in the FAQ because I want to use them for my profile. XD

And... I just want to share the code to everyone here. ^^

Here's the 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>spoiler_content</span>

And here's the example result :

[Show]

Like in the FAQ, choose a unique name for the "spoiler_id" and "show_id". Everything must be different and also different from other Show/Hide IDs.
And put the spoiler text in "spoiler_content".
-------------------------------------------------
And you can also use the box style by using div tag, like the one in my profile.

<div id="showwithbox_id" onclick="document.getElementById('spoilerwithbox_id').style.display=''; document.getElementById('showwithbox_id').style.display='none';" style="border:dotted 1px; width:200px; height:100px;">Click anywhere inside the box to show spoiler.</div><div id="spoilerwithbox_id" onclick="document.getElementById('spoilerwithbox_id').style.display='none'; document.getElementById('showwithbox_id').style.display='';" style="display:none;border:dotted 1px; width:200px; height:100px;">spoiler_content<br><br>Click anywhere inside the box to hide spoiler.</div>

Here's the example result:

Click anywhere inside the box to show spoiler.

Same like above, choose a unique name for the "showwithbox_id" and "spoilerwithbox_id". Everything must be different and also different from other Show/Hide IDs.
And put the spoiler text in "spoiler_content".

The <br><br>Click anywhere inside the box to hide spoiler. is optional, you may remove it if you want to.

And you may change the style if you want to.
But take a note that the second one must have display:none; in it.

You may also use "class" attribute too if you're using CSS and if it's necessary.

-------------------------------------------------

And REMEMBER, you have to write everything in one-line or else this may happens :
[Show]

or this :

Click anywhere inside the box to show spoiler.

Or something that even worse than above.
Well, you should avoid using this if you're not sure how to use them anyway.

PS : Sorry for my bad english.

------------------------------------- EDIT -------------------------------------
@PHS
Yes, it can be a good idea for 56K warning thread.
But it will only be effective if this code used for hiding an image, because texts will still be loaded when the page loads,
and from what I know, images inside the spoiler won't load until a person click to show it... but please correct me if I'm wrong. X.X

Yup, it's quite long. X.X
And I don't think I could make the codes shorter than that... T_T
but I'll try to find another way to do this. ^^

btw, this code is good to group things. ^^

_______________________________________________________

-- My Avatar X Signature Shop is currently [CLOSED] --

Check my profile for more information

Links :
Any Indonesian, Here! | Avy X Sig | My tutorial thread

Re: Simple HTML Code for [Show/Hide] spoilers.

Link | by

on 2010-07-16 21:04:16

A good One, especially for 56k warning thread, perhaps??? But, wasn't the codes are quite... Long??

Re: Simple HTML Code for [Show/Hide] spoilers.

Link | by

on 2010-07-17 12:36:00

Some people don't even understand the regular spoiler code Gendou made.
I used to know of a button spoiler, but I don't remember it now, might have to look it up.

Not sure if it'll be longer or shorter, I think shorter but who knows.
People seem to use the easier spoiler by just using the color code and highlighting the spoiler in that color to blend with the background.
Not so professional, but it's pretty easy to tell there's a spoiler, and you can't "accidentally" spoil it since you have to manually highlight it.

-------

Re: Simple HTML Code for [Show/Hide] spoilers.

Link | by

on 2010-09-24 00:19:40 (edited 2010-09-24 00:22:45)

Nice info, but i want to correct a few things

Provoltion said :
Yes, it can be a good idea for 56K warning thread.
But it will only be effective if this code used for hiding an image, because texts will still be loaded when the page loads,
and from what I know, images inside the spoiler won't load until a person click to show it... but please correct me if I'm wrong. X.X

I think it's wrong

Open this link
you'll see spoiler link "Type Moon Works", but don't click it

See this image :

Our browser has load those picture in spoiler to our browser, but we haven't click those spoiler link
That's it, thanks
PS : correct me if I'm wrong

Re: Simple HTML Code for [Show/Hide] spoilers.

Link | by gptdeutsch on 2024-03-19 23:49:16 (edited 2024-03-19 23:50:27)

Thanks for sharing this simple HTML code for creating [Show/Hide] spoilers! It\'s great to see community members like you contributing and sharing useful codes. ChatGPT ( https://gptdeutsch.de/ ) could further assist in refining or customizing the code for specific needs or applications.

Back | Reverse | Quick Reply | Post Reply |