Showing and hiding text in a post

Alexander and Sarah:

In response to your question about hiding and showing text in a post, so you don’t have to reveal a spoiler for a book or movie, I found the post, “Toggle Visibility – Show/Hide Anything.”

Here is my example. You may need to view JUST this post for the javascript to work. I pasted both pieces of code from that post below:

If you have not read Harry Potter 7, you might be wondering what happens at the end of the book! Do not click this link unless you want to find out what happens!

I copied the javascript from the above page and pasted it into my post first:

<script type="text/javascript">
<!–
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’)
e.style.display = ‘none’;
else
e.style.display = ‘block’;
}
//–>
</script>

I had to make a minor modification so the text is HIDDEN to start.

This is the code I used for this in the second part, I kept the top javascript the same:

If you have not read Harry Potter 7, you might be wondering what happens at the end of the book! <a href="#" onclick="toggle_visibility(‘harry’);">Do not click this link unless you want to find out what happens!</a>
<div id="harry" style="display:none">In the end, Harry defeats Voldemort and marries Ginny Weasley. They live happily ever after!</div>

You should be able to copy and paste the above code and use it in your own posts.

I used HTMLizer to allow the code to be visible.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *