Sometimes, you may require to hide a part of blog to give your post a compact look. Learn how to show and hide text in blog post.
Generally show and the hide links are used in that post which is longer than the usual length of post. The purpose of putting those links is that to give an idea to the reader of blog about the title & the small snippet of the content with remaining part of content is hidden. If readers want to read furthur more about the blog then they can proceed through the show/hide links.
Through this method the code will put a button on the page below the post & on clicking that button will show the hidden content though extending that part. All you will need to do is, just write that part of post or blog that you want to hide in between the Division tags as shown below. CODE:
__________________________________________________________________________
PLACE CONTENT THAT YOU DON’T WANT TO HIDE HERE
<div id=”HIDDEN” style=”display:none”> PLACE CONTENT THAT YOU WANT TO HIDE HERE </div> <button title=”show/hide” type=”button” onclick=”if(document.getElementById(‘HIDDEN’) .style.display==’none’) {document.getElementById(‘ HIDDEN ‘) .style.display=”}else{document.getElementById(‘ HIDDEN ‘) .style.display=’none’}”>Show/hide-content</button> ______________________________________________________________________________ If you want to add little animation on the page in show & hide links, like animation in hiding and showing the content. It will simply increase your post’s visual experience, you can place these links wherever you want. This method of links includes two parts · CSS · HTML
1. CSS
Just put the below given CSS code before the </head>tag of the page. _____________________________________________________________________________ <style type=”text/css”> .HIDDEN_LINK {display:block;margin:5px 0;} .HIDDEN{overflow:hidden;background: #f5f5f5;} .HIDDEN> div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;} .HIDDEN_LINK[value=”Show”] + .spoiler > div {margin-top:-100%;} .HIDDEN_LINK[value=”Hide”] + .spoiler {padding:5px;} </style> ______________________________________________________________________________
2. HTML
Place this part of code to that place where you want the links to appear. CODE: ______________________________________________________________________________ <input class=”HIDDEN_LINK” type=”button” value=”Show” onclick=”this.value=this.value==’Show’?’Hide’:’Show’;”> <div class=”HIDDEN”><div> Content to be hidden </div></div> ______________________________________________________________________________ Just place the content that you want to hide between the Division tags, as shown. The advantage you will have through this method of little animation. · Acceptance for more than 2 times usage in one page without the need of assigning unique IDs. All you need to do is duplicate the HTML part. · Flexibility in the speed of animation of hiding and revealing the content, you can change the speed in CSS code (in sec.). · Change in visible text value of the button – “Show” in the hidden state & “Hide” in the showing state. · Major advantage is in its visual appearance as animated expansion and contraction. But its working may not work properly in IE browser. Generally, long posts are not likely to be read by the people due to shortage of time in this fast moving world just because of their length, whether it has the exact and important information related to a particular topic, most of the time users give priority to short length post. Through the above mention procedure you will be able to show the main part of the post which exactly meets the topic and the rest can be hidden with the help of show and hide links, if the user want to read further then he or she can proceed through show/hide links.
