Spoiler HTML Code! Help!

Discussion in 'HTML & Website Design' started by SamuraiZero, Mar 25, 2008.

0
  1. #1
    Need help with what im sure is very basic, but Im not sure what to google.

    Basically, I want to code a piece that will say "Click here for spoilers" or something, that will then expand to show hidden text..

    Let me know if im not being clear with what i want!

    Thanks in advance!
     
    SamuraiZero, Mar 25, 2008 IP
  2. Morishani

    Morishani Peon

    Messages:
    239
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Oh you are clear enough, check this out :

    <html>
<head>
	<title>Spoiler HTML code</title>
	<style type="text/css">
body,input
	{
	font-family:"Trebuchet ms",arial;font-size:0.9em;
	color:#333;
	}
.spoiler
	{
	border:1px solid #ddd;
	padding:3px;
	}
.spoiler .inner
	{
	border:1px solid #eee;
	padding:3px;margin:3px;
	}
	</style>
	<script type="text/javascript">
function showSpoiler(obj)
	{
	var inner = obj.parentNode.getElementsByTagName("div")[0];
	if (inner.style.display == "none")
		inner.style.display = "";
	else
		inner.style.display = "none";
	}
	</script>
</head>
<body>
<h1>Spoiler HTML w/Js Code by Skrap</h1>
<div class="spoiler">
	<input type="button" onclick="showSpoiler(this);" value="Show/Hide" />
	<div class="inner" style="display:none;">
	This is a spoiler!
	</div>
</div>
</body>
</html>
    HTML:
    Live example

    Good luck :)
     
    Morishani, Mar 25, 2008 IP
    nicangeli likes this.