Javascript source

<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var mySlide = new Fx.Slide('box'); $('slideTog').addEvent('click', function(e) { e = new Event(e); mySlide.toggle(); e.stop(); }); $('box2').makeResizable(); $('box3').makeDraggable(); }); </script>

HTML Source

<a href="#" id="slideTog" name="slideTog">Show/Hide Box</a> <div id="box" style="background-color:#333; color:#fff;"> I am a box Watch me slide! </div> <div id="box2" style="background-color:#523C17; color:#fff; margin:5px; overflow:auto;"> I am a box Watch me resize! </div> <div id="box3" style="background-color:#CCB48B; color:#333; margin:5px;"> I am a box Watch me drag! </div>