This script adds an expandable post summary feature to your blog. The advantages of this JavaScript approach are
- The hidden text is displayed inline as opposed to opening a new window
- It is applied selectively at the discretion of the author eliminating the appearance of the phrase Read More! on every post
- It has a toggle feature to hide the text once displayed
- It can be applied retroactively to existing posts
To implement this feature: From the blog dashboard go to Layout>Edit HTML. Add the following classes to the <b:skin> template section:
.expand
{
display: inline;
}
.collapse
{
display: none;
}
Next, add the following script to the <head> section prior to the <b:skin> tag:
<script type="text/javascript" language="javascript">
//<![CDATA[
function toggleMore() {
var currentText = this.innerHTML;
if (this.nextSibling.nodeName == "#text") {
this.parentNode.removeChild(this.nextSibling);
}
if (currentText == "More...") {
this.innerHTML = "Hide <br />";
this.nextSibling.className = "expand";
}
else {this.innerHTML = "More...";
this.nextSibling.className = "collapse";
}
}
function attachHndlr() {
var anchors = document.getElementsByName("ToggleMore");
for (var i = 0; i < anchors.length; i++) {
anchors[i].onclick = toggleMore;
anchors[i].href="#" + i;
}
}
//]]>
</script>
Change the <body> tag to
<body onload='attachHndlr();'>
Finally, paste the following code into the 'post template' found (starting from the dashboard) at Settings>Formatting. This will cause the code to be automatically loaded into the post editor.
<a href="#" name="ToggleMore">More...</a><span class="collapse">
</span>
The text to be hidden is placed after the <span class="collapse"> tag. If the post does not require this feature, simply delete the code from the post editor window. Also, the appearance is better if the hidden text begins between paragraphs.
Note: The string More... is used to identify the state of the hidden text. This string can be changed, if desired, to something like Read More... but it must be changed everyplace More... ocurrs in the script above as well as in the post. The string must be the same for the entire blog, however; it cannot be modified on a per post basis. If it is changed after being used in some posts, those prior posts must be edited to include the change.
|
