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