Thingys & Doodads - III

In this edition of Thingys & Doodads we'll look at an expanding / collapsing comment script from the Scripty Goddess.

One way to make your site more reader-friendly is to provide a show/hide comments script. This script will show or "roll-down" your comments in the current window by clicking on a link displayed between your post text and your byline. Then you can click another link and hide or "roll-up" the comments.

I have modified the original Scripty Goddess code a little by inserting code to display a horizontal line between each comment. This makes separating and reading each somment a little easier.

Installation instructions:

Cut and paste the following code between the tags in every page that you want to utilize the script:

<!-- Begin Scripty Goddess Show/Hide Comments -->
<script language="javascript">
function showMoreComments(varA12, varB12){
var1232 = ('varXYZ2' + (varA12));
varABC2 = ('varP2' + (varA12));
if( document.getElementById ) {
if( document.getElementById(var1232).style.display ) {
if( varB12 != 0 ) {
document.getElementById(var1232).style.display = "block";
document.getElementById(varABC2).style.display = "none";
} else { document.getElementById(var1232).style.display = "none";
document.getElementById(varABC2).style.display = "block"; }
} else { location.href = varB12;
return true; }
} else { location.href = varB12;
return true; }
}
</script>
<!-- Begin Show/Hide Comments -->

Next, in the section of the Main Index Template, cut and paste the following code in above the code that says “Posted By…”:

<!-- Begin Scripty Goddess Show/Hide Comments -->
<MTEntryIfAllowComments>

<span id="varP2<$MTEntryID$>" class="extended">
<a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">
<p>
Show Comments »
</p>
</a>
</span>
<div id="varXYZ2<$MTEntryID$>" style="display: none">

<hr width="100%" size="1px" color="#000000" align="left" />

<MTComments>
<$MTCommentBody$>
posted by <$MTCommentAuthorLink$> at <$MTCommentDate$>
<br />

<hr width="100%" size="1px" color="#000000" align="left" />

</MTComments>

<a href="#<$MTEntryID pad="1"$>" onclick="showMoreComments(<$MTEntryID$>,0);return
true;">
<p>
« Hide Comments
</a>
</p>
</div>

</MTEntryIfAllowComments>
<!-- End Goddess Show/Hide Comments -->

[SAVE] and Rebuild indexes only, or whatever archives you decide to install the script in. I would recommend installing it in the all but the Individual Entry Archives.

You can customize the lines that say Show Comments and Hide Comments to say whatever you want them to say.

You can also customize the horizontal line width and color and size properties to make your color schemes etc.

If you have any problem installing this script, let me know and I'll give you a hand.

Note: This script sometimes does a funky disappearring text magic trick. It only does it in some sites, not all of them. You will have to install it and test it for yourself. As usual, make a backup copy of your Main Index Template before making modifications.

Tomorrow: In-line Show/Hide script for php sites.

Posted by Madfish Willie at April 28, 2004 11:52 PM