Are your eyes feel really tired scrolling to the needed place on the blog?
You don't want others to see it on your page, do you?
Use this guide to add expand/collapse effect for some block of your posts
- You are to update your blog template.
- Go to the Edit template HTML page
- Insert following text after<head> tag
<style>
<b:if cond='data:blog.pageType != "item"'>
.posthidden {display:none}
.expandLink {display:inline}
<b:else/>
.expandLink {display:none}
.posthidden {display:inline}
</b:if>
.postshown {display:inline}
.posthiddenViewTypeUndepandent {display:none}
.expandLinkViewTypeUndepandent {display:inline}
</style>
<script type='text/Javascript'>
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
} else {
whichpost.className="postshown";
}
}
</script> - Save Template
- Then you can use following construction in your posts.(this construction should be placed into html view of post creation)
<span class="posthidden" id="$unicID$">
This text can be collapsed/expanded
</span>
<span class="expandLink"><a href="javascript:expandcollapse('$unicID$')">$Name_of_link$</a></span></span>where$unicID$ - Indentifyer of currenc expandable/collapsable block
$Name_of_link$ - Name of link to be displayed
Use posthiddenViewTypeUndepandent span class instead of posthidden and expandLinkViewTypeUndepandent instead of expandLink if you want to use expanding of this block both in multi posts view and in single post view. Block is expandable only in multi posts view by default.
