Spoiler Demo

GetTriggerUnit- · Jun 27, 2010

Hi!

I was bored this afternoon and decided to work a bit of Javascript. Here's was I did!

Test it out on my future website! www.sc2tools.tk

Test.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<title>Title</title>
	<script type="text/javascript" language="Javascript" src="spoiler.js"/>
</head>

<body>
	<!-- The Show/Hide button -->
	<input id="button1" type="button" value="Show" onclick="Spoiler('button1', 'div1')"  />
	<!-- What will be visible/hidden -->
	<div id="div1" style="visibility:hidden;border:2px black solid;">
		<!-- Inside the spoiler -->
		Some Text<br/>
		<span style="color:blue;">Some Coloured Text</span><br/>
	</div>
</body>

</html>

Spoiler.js

Code:

function Spoiler(but, div) {
	var state = document.getElementById(div).style.visibility;
	if (state == "visible") {
		document.getElementById(div).style.visibility = "hidden";
		document.getElementById(but).value = "Show";
	}
	else {
		document.getElementById(div).style.visibility = "visible";
		document.getElementById(but).value = "Hide";
	}
}

If you need it, use, modify it! It the function Spoiler() takes two params. but is the button name to change "Show"/"Hide" and div is what thing to show/hide.

celerisk · Jun 28, 2010

A possible improvement would be to remove the need to create two unique IDs for each spoiler:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show demo</title>
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
.spoiler form {display: inline; margin-left: 1em;}
.spoiler {border: 1px solid silver;}
.spoiler div {border: 1px solid silver; margin: 0.5em 1em; display: none;}
</style>
<script type="text/javascript">
function spoiler(ref)
{
        var div = ref.parentNode.parentNode.getElementsByTagName('div')[0];
        div.style.display = div.style.display == 'block' ? 'none' : 'block';
        ref.value = ref.value == 'Show' ? 'Hide' : 'Show';
}
</script>
</head>
<body>
        <div class="spoiler">
                <form method="post" action="#" onsubmit="return false">
                        <input type="button" value="Show" onclick="spoiler(this)" />
                </form>
                <div>
                        Content to hide
                </div>
        </div>
        <div class="spoiler">
                <form method="post" action="#" onsubmit="return false">
                        <input type="button" value="Show" onclick="spoiler(this)" />
                </form>
                <div>
                        More content to hide
                </div>
        </div>
        <div class="spoiler">
                <form method="post" action="#" onsubmit="return false">
                        <input type="button" value="Show" onclick="spoiler(this)" />
                </form>
                <div>
                        Yet more content to hide,<br />with more than one line.
                </div>
        </div>
</body>
</html>

Note on accessibility:
Everything should be visible by default, and some "onload" JavaScript initially hides the spoilers.

Note on testing:
The above has been verified on precisely one single browser

Note on validation:
An "input" element outside a "form" does not validate under "strict".
(Neither does an input immediately inside a form, without a container like "p")

GetTriggerUnit- · Jun 28, 2010

Thanks very much. I'm not very good in Javascript yet. I didn't know you could use this. But, you have to use <form ...></form> which is much longer than ids. ;D

celerisk · Jun 28, 2010

The form is there so the button doesn't feel alone

It's also possible to do without any buttons, and go with some nice style instead:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show demo</title>
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
.spoiler {border: 1px solid silver;}
.spoiler .click {background-color: #eee; width: 4em; text-align: center;}
.spoiler .content {border: 1px solid silver; margin: 0.5em 1em; display: none;}
</style>
<script type="text/javascript">
function spoiler(ref)
{
        var div = ref.parentNode.getElementsByTagName('div')[1];
        div.style.display = div.style.display == 'block' ? 'none' : 'block';
        ref.innerHTML = ref.innerHTML == 'Show' ? 'Hide' : 'Show';
}
</script>
</head>
<body>
        <div class="spoiler">
                <div class="click" onclick="spoiler(this)">Show</div>
                <div class="content">
                        Content to hide
                </div>
        </div>
        <div class="spoiler">
                <div class="click" onclick="spoiler(this)">Show</div>
                <div class="content">
                        More content to hide
                </div>
        </div>
        <div class="spoiler">
                <div class="click" onclick="spoiler(this)">Show</div>
                <div class="content">
                        Yet more content to hide,<br />with more than one line.
                </div>
        </div>
</body>
</html>

I left out the "nice style" part to keep it shorter.

GetTriggerUnit- · Jun 28, 2010

Yeah very nice. Ty vm =)

EDIT: Is there a way to change mouse over the show/hide?

celerisk · Jun 28, 2010

.spoiler .click {background-color: #eee; width: 4em; text-align: center; cursor: pointer;}

Spoiler Demo

GetTriggerUnit-

DogEntrepreneur

celerisk

When Zerg floweth, life is good

GetTriggerUnit-

DogEntrepreneur

celerisk

When Zerg floweth, life is good

GetTriggerUnit-

DogEntrepreneur

celerisk

When Zerg floweth, life is good

Settings Notifications

Options

The Helper Discord

Staff online

Members online

Share this page

Affiliates

Network Sponsors

Spoiler Demo

DogEntrepreneur

When Zerg floweth, life is good

DogEntrepreneur

When Zerg floweth, life is good

DogEntrepreneur

When Zerg floweth, life is good

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors