Learning Signs

Our Family Learning Blog

Learning Signs header image 2

Showing and hiding text in a post

January 12th, 2010 by Dad · 1 Comment

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.

Tags: dad

1 response so far ↓

  • 1 Scott Weidig // Jan 12, 2010 at 10:48 pm

    Wes,

    Great post. I can see a number of great uses. Thanks for sharing your families learning experiences.

    Scott

Leave a Comment


× two = 10

Locations of visitors to this page