Comments [1] posted: May 27, 2008 Greg O'Byrne

You've probably seen the functionality around at certain blogs where you can click on a link at the end of the post that lets you expand the blog entry to show more content. I like that functionality and dasBlog (my blog software) didn't have it so I wrote my own.

With dasBlog you can have a description for the displayed text on the main blog page and then you can click through to the full blog post, but I wanted the ability to expand and contract dynamically right on the front page.

Here is how I did it.  Feel free to take and use and modify whatever you want.  It's offered as is and public domain and yadda yadda.

First, here are the elements you need to put on your page around the content you want hidden/expanded:

<div  class="trHiderControl">
<span onclick="trReveal(this);"  trhidertoggle="false" trID="trRevealer" class="trHiderTopClick">reveal</span>
<div class="trHiderContent" trID="trHiderContent">

<!--content here-->
blah blah
<!--content here-->

</div>
<span class="trHiderBottomClick" trID="trReHider" onclick="trHider(this);">close up</span>
</div>

Set four css classes, most importantly set:

.trHiderContent
{
     display:none
}

and

.trHiderBottomClick
{
     display:none
}

Then include the file trHider.js and you're golden.  The contents of trHider.js are just two functions:

//reveal text inline.
function trReveal(oEl)
{
    if(oEl.getAttribute("trhidertoggle")=="true")
    {
        trHider(oEl);
        return;
    }
    oTopEl = oEl.parentNode;
    for(i=0; i<oTopEl.childNodes.length; i++)
    {
        if(1==oTopEl.childNodes[i].nodeType)
        {
            switch(oTopEl.childNodes[i].getAttribute("trID"))
            {
                case "trRevealer":
                    oTopEl.childNodes[i].setAttribute("trhidertoggle","true");   
                    break;
                case "trHiderContent":
                    oTopEl.childNodes[i].style.display = "block";
                    break;
                case "trReHider":
                    oTopEl.childNodes[i].style.display = "block";
                    break
                default:
                    //nothing
            }
        }
    }
}

//hide text inline
function trHider(oEl)
{
    oTopEl = oEl.parentNode;   

    for(i=0; i<oTopEl.childNodes.length; i++)
    {
        if(1==oTopEl.childNodes[i].nodeType)
        {
            switch(oTopEl.childNodes[i].getAttribute("trID"))
            {
                case "trRevealer":
                    oTopEl.childNodes[i].setAttribute("trhidertoggle","false");   
                    break;
                case "trHiderContent":
                    oTopEl.childNodes[i].style.display = "none";
                    break;
                case "trReHider":
                    oTopEl.childNodes[i].style.display = "none";
                    break
                default:
                    //nothing
            }
        }
    }
}

...and Voila', expand and contract at will.

Example:

reveal

blah blah blah blah blah

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

close up

      Comments [1]
tags: [blog | code | dasBlog | techRivet]


Comments [0] posted: Jul 23, 2007 Greg O'Byrne

I just updated the software package.  Leave a comment if you notice anythign not working correctly.


      Comments [0]
tags: [blog | dasBlog | techRivet]


Comments [0] posted: Jul 20, 2005 admin

Be sure to visit all the options under "Configuration" in the Admin Menu Bar above. There are 16 themes to choose from, and you can also create your own.

 


      Comments [0]
tags: [dasBlog]


<<< Older Stuff Yo!

Go Vote for techRivet


The 2008 Weblog Awards
Just read down in the comments and click on the sign next to the techRivet entry.
The 2007 Weblog Awards



Total Posts: 546
This Year: 2
This Month: 2
This Week: 1
Comments: 219



Sign In
home | about | rss
heya punk.here is where lotsa content will be
Larry says!
Larry says!