More is less

Another Script Entry is long overdue. It is time to show you how to hide and show bits of stuff on your blog pages, using only Javascript. You know - "Show comments here", or "more", for an extended entry.

Other bloggers use php to accomplish this, but if you don't have access to php, or if you don't want to learn php, then you can do it with just Javascript. Strictly speaking, if you can use php or some other server-side scripting language, it is probably better, because if you get lots of comments, your index or archive pages can become quite large using the Javascript method, because *all* of your comments for all entries are on the page, you just can't see them unless you open them. With php, you can prevent them from being sent to the browser at all, until you request them.

Much of the code is adapted from php code found at ScriptyGoddess. If you have php, and want to use it, go there for loads of php Scripty Goodness™!

Please note, this is a loooong entry:

First, you need the javascript routine to show and hide. Rightclick and download blogtricks.js and copy it to your server. Please do not connect to the copy on our server, as this will strain our bandwidth, and is a serious breach of etiquette. In your header block, insert this line:

<script src="http://yourserver/path/blogtricks.js" type="text/javascript"></script>

To show extended entries in your blog, replace your <MTEntryIfExtended></MTEntryIfExtended> pair with:

<MTEntryIfExtended>
<span class="extended">
<span id="click<MTEntryID>"><a href="#jsenabled=no"
onclick="showMoreAnything(<MTEntryID>,'#?jsenabled=no');return false;">
<b>more...</b><!-- replace this with whatever text you want -->
</a><br /></span>
<div id="hide<MTEntryID>" style="display: none" >
<$MTEntryMore$><!-- this is the actual extended entry -->
<a href="#" onclick="showMoreAnything(<MTEntryID>,0);return false;">
<b>less...</b><!-- replace this with whatever text you want -->
</a><br />
</div>
<br />
</span>
</MTEntryIfExtended>

The <MTEntryIfExtended> tag is important. If you don't put this around this code, then you'll have "more" and "less" controls even on entries that do not have extended entries.

If you don't use Movable Type, simply replace the Movable Type tags with the appropriate tags for your content management system.

To show your comments on the page, the code is as follows:

<MTEntryIfAllowComments>
| <a href="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a><br />
<MTEntryIfComments>

<span id="click<MTEntryID>.1"><a href="#jsenabled=no" onclick="showMoreAnything(<MTEntryID>.1,'#?jsenabled=no');return false;">

<script type="text/javascript">
<!--
// this prevents a link for opening, if there are no comments
if (<$MTEntryCommentCount$> > 0) {
document.write("<b>Show comments here...</b>"); //replace with appropriate text for you
}
//-->
</script>

</a><br />
</span>

<div id="hide<MTEntryID>.1" style="display: none" >

<!-- ********* start of actual comment display ********* -->
<MTComments>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">Posted by <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$></span>
</div>
</MTComments>
<!-- ********* end of actual comment display ********* -->

<a href="#" onclick="showMoreAnything(<MTEntryID>.1,0);return false;">

<b>Hide comments...</b> <!-- replace with appropriate text -->

</a><br />
</div>
<br>

</MTEntryIfComments>
</MTEntryIfAllowComments>

You can do the same for any block of text you want to be able to hide and show:

<span id="clickArchives">
<div class="sidetitle">
Archives <a href="#jsenabled=no" onclick="showMoreAnything('Archives','#?jsenabled=no');return false;"><b>(show)</b></a></div>
</span>
<div id="hideArchives" style="display: none" >
<div class="sidetitle">
Archives <a href="#" onclick="showMoreAnything('Archives',0);return false;"><b>(hide)</b></a>
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>
</div>
</div>

This is a slight variation on the previous examples, in that it puts the both "(show)" and "(hide)" controls at the top of the section. Simply replace the word "Archives" everywhere with a unique word that identifies that block of text. I have used this basic technique for showing and hiding archives, categories, and recent entries, in the column at right.

NOTE: whenever you play around, save your old code before embarking on significant change. You can always put back your old (working) code if you need to.

As always, please let me know if this is helpful, and if you have problems, feel free to ask, either in comments or by emailing me at squiddy AT programmer DOT net.

And please, ping my trackback, or leave a comment if you use this!

Have fun!

Posted by Squiddy at October 8, 2003 11:27 AM | TrackBack