How to Show and Hide Text in Blog Post
I would like to share on how to make a Show/Hide text in your blog post. I'm sorry if I didn't explain detail enough because I want to keep my post short as I'm in a hurry. However, you can read the detail explanation on Blogger Help.
In this example, I assume you have sub topics that you want to make it hidden until reader clicks on the headline. Without the show/hide trick, it would look like this...
Here's my step to do this... Firstly, edit your template and add the following code in the CSS area.
Then add the following javascript code on your blog template between the
Now save your template and all you have to do in each post you want to have the expandable sub topic is to create unique id for each sub topics where the code will look like this:
And, here's the result...
That's all... Good luck and have a nice day!
In this example, I assume you have sub topics that you want to make it hidden until reader clicks on the headline. Without the show/hide trick, it would look like this...
Title One
This is the example text for title one.Title Two
This is the example text for title two.Title Three
This is the example text for title three.Here's my step to do this... Firstly, edit your template and add the following code in the CSS area.
.posthidden {display:none}
.postshown {display:inline}Then add the following javascript code on your blog template between the
<head></head> tag.<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>Now save your template and all you have to do in each post you want to have the expandable sub topic is to create unique id for each sub topics where the code will look like this:
<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
This is the example text for title one.</span>
<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
<span class="posthidden" id="subtopic0002">
This is the example text for title two.</span>
<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
This is the example text for title three.</span>And, here's the result...
Title One
This is the example text for title one. The long text is just an example that this area will automatically move the space down. Subscribe to coderstalk.blogspot.com for more free code from me. Or simply check me out for latest update soon.Title Two
This is the example text for title two. Come on my friend, you can even hide images in here. Look at this...
Title Three
This is the example text for title three.That's all... Good luck and have a nice day!
You may also love to read:
Comments
The article in Blogger.com highlights the classic layout not the new features ones. I have already pasted the first script between both head tags, could enlighten me on how to paste the next on in the CSS, though where is the CSS exactly?
Please reply me, Meticulousness@Gmail.com
Thank you!
You can search in the Template Code for tag like this ]]></b:skin> (somewhere before the </head> tag) and simply paste the code before that line. I've emailed for the screenshot.
Hope it helps. Thanks for visiting my blog.
Please respond to
3sonsblessed@gmail.com
Thanks!!
http://coderstalk.blogspot.com/2008/02/how-to-show-and-hide-text-in-blog-post.html
And (shameless plug), be sure to check out my blog to learn how to get a Free $25!
Where to put this code in WYSIWYG editor?
.posthidden {display:none}
.postshown {display:inline}
href="javascript:expandcollapse('subtopic9999')"
to
href='javascript:expandcollapse(& apos;subtopic9999& apos;)'
and on the source code appear:
href="javascript:expandcollapse(\" subtopic9999\="" )=""
can you help?
Sad to say that you lost me instantly since I don't know what an "CSS area" is.
Help!!!!!!!!!
aDios,
Mariano
this is what I did anyway:
http://trustnobody-godswindow.blogspot.com/2008/08/wailers-ad-alghero-30-agosto-2008.html
thanks again
Thanks again :-)
finaly i saw this trick! thnk u so much! even my 300 words.. this trick was worked! And because of this! i will link u! thnx again! ^^
I tried it on my blog but it just wouldn't work. :(
OMG!!
Thank you so muuuch!! :D!!
I'm using a customized blogspot layout.
Ideally the unhidden text would be in italics or something so if you were to hide it again you could click on the text to make it vanish again.
send to my email!!
permission to repost in Indonesian Language
http://www.ifant.co.cc/2011/05/show-hide.html
http://theworldofmyimagination.blogspot.com/p/people-who-have-been-there.htmlhttp://theworldofmyimagination.blogspot.com/p/people-who-have-been-there.html
The only question I have if you could answer it, is that my "Mobile Version" doesn't work. It shows the entire hidden section. Is there any way to fix that?
Thanks again!!
But thanks anyway. It's better than nothing =)