Help with code using Spoiler tag

**Raubie** · 08-12-2010, 01:36 AM

I could really use someone's help with what is probably a simple code fix.

Here's the spoiler code I'm using on a blogger.com page that uses a button to reveal an image and text. Being a one-time only use, I'd like to replace the "Click Here" button with an image (say, of a ticket) that once clicked, reveals the hidden image/text below. Since this is currently working via the button, what in the following code needs to be changed to replace the activation button with an image URL instead (assuming that all code in div class="spoiler" doesn't need to be changed, just the "pre-spoiler code). I like the working code below as it doesn't require any css/javascript.

Code:

<div class="pre-spoiler">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Click Here'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Click Here';}" style="font-size: 10px; margin: 0px; padding: 0px; width: 140px;" type="button" value="Click Here" /></div>

<div>
<div class="spoiler" style="display: none;">
<a href="IMAGEURL" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" onclick="window.open('IMAGEURL','_blank','toolbar=0, location=0, top=5, left=50, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=x, height=y');return(false)"><img alt="" border="0" id="name" src="IMAGEURL_SMALL" width="400" /></a>text</div></div>

Your help would be really appreciated. Thank you. ~ Raubie

**Beverleyh** · 08-12-2010, 01:51 PM

Change the input tag to an img tag using standard HTML: http://www.w3schools.com/tags/tag_img.asp

You'll probably want to remove this part too;

Code:

style="font-size: 10px; margin: 0px; padding: 0px; width: 140px;" type="button" value="Click Here"

**Raubie** · 08-12-2010, 04:57 PM

Change the input tag to an img tag using standard HTML: http://www.w3schools.com/tags/tag_img.asp

Many, many thanks BeverleyH for taking the time to resolve my problem - the "input" tag was giving me grief. I also removed the unnecessary code you highlighted.

**Raubie** · 08-12-2010, 05:37 PM

BeverleyH, I have a followup question if I may.

How do I replace the image upon onclick with another image of the same dimensions (with the spoiler image/text exposed), and then return the original image on the subsequent click (with the spoiler image/text hidden again)? Can this be done without javascript?

Thanks again. ~ Raubie

**Beverleyh** · 08-13-2010, 08:51 AM

You'd need javascript I'm afraid - look into jQuery for future projects: http://jquery.com/ and you'll be writing your own functions in minutes.

Something like this (below) will toggle the button image src and also reveal the spoiler in an attractive slidedown/up motion.

I'm sure you can see quite easily how the function is built - jQuery references the id's and then tells them to do something based on an effect/event from its internal library (ie - the main jQuery javascript file).

Code:

<html>
<head>
<title>Spoiler Test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
		{
               	$('#pre-spoiler').toggle(
                    function()
			{
                        $('#spoiler').slideDown();
                        $('#button-img').attr('src','images/button-clicked.jpg');
                    	}, 
			function() 
			{
                        $('#spoiler').slideUp();
                        $('#button-img').attr('src','images/button.jpg');
                    	});
          	});
</script>

</head>
<body>


<div id="pre-spoiler">
	<img src="images/button.jpg" id="button-img"/>
</div>

<div id="spoiler" style="display:none;">
	<a href="IMAGEURL" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" onclick="window.open('IMAGEURL','_blank','toolbar=0, location=0, top=5, left=50, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=x, height=y');return(false)"><img alt="" border="0" id="name" src="IMAGEURL_SMALL" width="400" /></a>
	...more content...
</div>


</body>
</html>

**Raubie** · 08-13-2010, 02:07 PM

This looks great - can't wait to try it out. Thank you again BeverleyH!

**Andrey** · 09-03-2010, 02:07 AM

Hi,
It's very nice script indeed.Is there any options to use three spoilers at once.
I have tried to but two buttons on my index.page as a result first spoiler has slided down but second one hasn't.I've just copied them and pasted twice without any changes.Would you please to help me with that what have i done wrong?
Thanks

**Beverleyh** · 11-04-2010, 01:58 PM

You would simply need to duplicate the script and div arrangement and then substitute in unique IDs;

Code:

<html>
<head>
<title>Spoiler Test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
		{
               	$('#pre-spoiler').toggle(
                    function()
			{
                        $('#spoiler').slideDown();
                        $('#button-img').attr('src','images/button-clicked.jpg');
                    	}, 
			function() 
			{
                        $('#spoiler').slideUp();
                        $('#button-img').attr('src','images/button.jpg');
                    	});

               	$('#pre-spoiler2').toggle(
                    function()
			{
                        $('#spoiler2').slideDown();
                        $('#button-img2').attr('src','images/button2-clicked.jpg');
                    	}, 
			function() 
			{
                        $('#spoiler2').slideUp();
                        $('#button-img2').attr('src','images/button2.jpg');
                    	});
          	});
</script>

</head>
<body>


<div id="pre-spoiler">
	<img src="images/button.jpg" id="button-img"/>
</div>

<div id="spoiler" style="display:none;">
	<a href="IMAGEURL" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" onclick="window.open('IMAGEURL','_blank','toolbar=0, location=0, top=5, left=50, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=x, height=y');return(false)"><img alt="" border="0" id="name" src="IMAGEURL_SMALL" width="400" /></a>
	...more content...
</div>


<div id="pre-spoiler2">
	<img src="images/button2.jpg" id="button-img2"/>
</div>

<div id="spoiler2" style="display:none;">
	<a href="IMAGEURL" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" onclick="window.open('IMAGEURL','_blank','toolbar=0, location=0, top=5, left=50, directories=0, status=0, scrollbars=0, resizable=1, copyhistory=0, menuBar=0, width=x, height=y');return(false)"><img alt="" border="0" id="name" src="IMAGEURL_SMALL" width="400" /></a>
	...more content...
</div>


</body>
</html>

Just follow the same pattern for a 3rd button/div.

Thread: Help with code using Spoiler tag

Thread Tools

Search Thread

Help with code using Spoiler tag

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions