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: