MooTools - Slider

Got a question? Ask a developer in our Developer's Corner Forum

Back To The Developer's Corner Main Page

MooTools - Slider

The MooTools Slider is a great way to get more content on a page, but keep it hidden until it's needed.

Save the following code to a local file and open it with a browser to test:

<html>
  <head>
    <script type="text/javascript" src="http://www.cmsmarket.com/media/system/js/mootools.js"></script>
    <script type="text/javascript">
      var mySlider;
      window.addEvent('domready', function() {
        mySlider = new Fx.Slide('myElement', {duration: 500});
        mySlider.hide();
      });
    </script>
  </head>
  <body>
    <a onclick="javascript:mySlider.toggle(); return false;" href="#">Toggle Div</a><br />
    <div id="myElement">
      This is the content of the myElement div.
    </div>
  </body>
</html>

I've copied part of the above code into this article to see it in action here:

Toggle Div

This is the content of the myElement div.

Developer's Corner - General

Tools

Tips and Tricks

MooTools 1.11

Developer's Corner - Joomla

Tools

Tips and Tricks

Basics

Cart

Got a question? Ask a developer in our Developer's Corner Forum

Developer's Corner - General

Developer's Corner - Joomla