MooTools Non-Flickering Slide In/Out With Initial Closed State

Well that’s quite a mouthful, but it’s as descriptive and as concise as I can be.  I’ve been using mootools JavaScript library for various things and wanted a slider to slide out information about certain things I’ve been doing on various projects.  The only problem is that there’s no default "closed" or "in" state.  The various solutions I’ve seen are really no good, because when the page loads you will initially see the box that you want to hide, then it will suddenly vanish.  To fix this issue just do the following:

<script language="javascript">
   window.onload = function() {
      var slider = new Fx.Slide('help_slide');
      slider.hide();
   }

   window.addEvent('domready', function() {
      var status = {
         'true': 'Hide Help',
         'false': 'Show Help'
      };

      var helpSlide = new Fx.Slide('help_slide');

      $('help_toggle').addEvent('click', function(e) {
         e.stop();
         helpSlide.toggle();
      });

      helpSlide.hide();

      helpSlide.addEvent('complete', function() {
         $('help_toggle').set('html', status[helpSlide.open]);
      });
   });
</script>

It’s a hack really, but it does the trick perfectly for me.  Other solutions require using some CSS to set the initial set to hidden then changing the style using the JavaScript which has a few bugs.  It’s a shame the library doesn’t support initial states though, perhaps something for future versions.