6.15.2008

Browse > Home / / How to create expandable post summaries using JavaScript

How to create expandable post summaries using JavaScript

0 comments Sunday, June 15, 2008 Posted by DJYano
Labels:

In my old post i teach you how to create expandable post summaries using Conditional CSS. Now i am going you to teach you How to create expandable post summaries using JavaScript. This is handy if you have lots of long articles all on one page. Note that you'll need to have post pages enabled in order to make this feature work.

Before you do anything in your template, please backup your template.

On your blogger dashboard, Click Layout -> Edit HTML -> Download Full Template.

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

    • The disadvantage of using JavaScript is it requires the viewer to not turn off scripting in their browser.

    To implement this feature: From the blog dashboard go to Layout>Edit HTML.

    Find this:

    <b:skin>

    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].oncIick = toggleMore;
    anchors[i].href="#" + i;
    }
    }
    //]]>
    </script>

    Next change the <head> tag to:

    <body onload='attachHndlr();'>


    Finally, paste the following code into the 'post template' found at Settings>Formatting which will cause it to be loaded into the post editor automatically.

    <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.

    You'll enter the summary text outside the span tags and the remainder inside, like so:

    Here is the beginning of my post.

    <a href="#" name="ToggleMore">More...</a><span class="collapse">

    And here is the rest of it.

    </span>


    Comments

    0 comments to "How to create expandable post summaries using JavaScript"

    Post a Comment

    Subscribe to: Post Comments (Atom)