Search This Blog

Saturday, December 1, 2012

Expand or Hidden function...

Click the button below to expand the post or click again to hide the post.
Today wanna show you guys about this Expand or Hide the text. Try click the button above and you will see a ' Hidden text here ' will pop out, and if you click again the hidden text will hide back inside.
The coding nothing special just copy paste in your post HTML tab and here's the code. After you post click the Compose tab and you will see the button on your post already.

<div style="text-align: center;"> <span style="color: #6fa8dc;"><u><i>Click the button below to expand the post or click again to hide the post. </i></u></span></div> <div id="varname" style="display: none;"> Hidden Text Here <br /> <div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ericworld-cadey.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="http://i1206.photobucket.com/albums/bb449/ericcadey/credit.jpg" width="200"</div> <div style="text-align: center;"> <button onclick="if(document.getElementById('varname') .style.display=='none') {document.getElementById('varname') .style.display=''}else{document.getElementById('varname') .style.display='none'}" title="Click to show/hide content" type="button">Expand / Hidden</button></div>
And so inside have some code you can change to your own style.
1. <span style="color: #6fa8dc;"><u><i>Click the button below to expand the post or click again to hide the post. You can change the color and the text to show up.

2. Hidden Text Here. Change the hidden text you want to show or hide.
3. <div id="varname" style="display: none;">... Change all the "varname" to the name you like, this name is to let the PC understand which button should show which message, there are total 4 "varname" you need to change if you wish to change the name. Example: if you have 3 button with same "varname", which means it will only show or hide the first button text, but if you change all the 3 post with difference like "varname 1", "varname 2", "varname 3"... which mean they will have their individual show or hide text on their own button.

No comments:

Post a Comment

Thank for comments, will reply to you soon...