Due to updates, over time, that have been made to the site and the age of this article, this post may not display correctly. In particular images may be missing or product reviews display incorrectly.

If this is the case and you'd particularly like me to fix it, then please reach out to me on Twitter.

In the past I’ve mentioned the Lightbox script that I use on the BMTG website and on this blog. This uses the Scriptaculous JavaScript library.

Last night I stumbled across an alternative to Scriptaculous, named mootools. This is a lot more compact and they even allow you to compile your own version at the point of download, allowing you to limit its content. It even compresses the code for you. Anyway, this is no good to me without a matching Lightbox script and, lo-and-behold, I found one named Slimbox – in fact it’s almost identical, but quicker and various improvements made.

I’ve now embedded both of these in a new version of the BMTG site that I’m working on, and it works like a dream with no modifications to my existing code (other than calling different scripts and stylesheets) required. Nice. It’s more compact and a lot quicker too.

One down side is that I was using Scriptaculous for one of the changes I was making to the site – namely hiding various page contents unless a button is pressed to reveal it. mootools has an equivalent function, but it’s not so easy to use (the downside of a more compact system I guess). Instead, I’ve done anyway with the flashy effects and used a simple bit of JavaScript instead.

By default the section that I want to hide has the following DIV surrounding it…

<div id="cast_div" style="position:relative; display:none">
:
Content here
:
</div>

This will hide the content until a button (displayed above the content) is pressed.

So, to reveal the content you add the following..

onclick="document.getElementById('cast_div').style.display='block'"

To hide the content again…

onclick="document.getElementById('cast_div').style.display='none'"