将jQuery幻灯片效果转换为mootools

Question

I have a script that slides a div down from behind the menu, when people click on the tab. However its in jquery and I want to use mootools (lots of reasons I wont go into here). However im stuck with mootools 1.1 at present. But for some reason my attempt is not working :(

The html

print("code sample");
   <div id="panel">
    <form action="">
           < form here > 
    </form>
</div>
<div class="slide">
  <p class="sl"><a href="#" class="btn-slide" id="toggle"><span></span></a></p>

Div id panel holds the form which slides down, div class slide and the P tag is replaced by a tab/button which hangs down via css, clicking on this slides the tab down.

The jquery (which works fine)

print("code sample");
  <script type="text/javascript">
  $j(document).ready(function(){
$j(".btn-slide").click(function(){
    $j("#panel").slideToggle("slow");
    $j(this).toggleClass("active"); return false;
});

  });
  </script>

My moo attempt

print("code sample");
 <script type="text/javascript">
window.addEvent('domready', function(){
 var mySlide = new Fx.Slide('panel');
    $('toggle').addEvent('click', function(e){
        e = new Event(e);
        mySlide.toggle();
        e.stop();
    });
});
 </script>

Like I said above I am restricted to moo 1.1 at present, but if there is a answer that will work with both 1.1 and 1.2 or if its a similar change I would be grateful to hear, as it will be updated at some point.

Answer 1

This should work both in 1.11 and 1.2:

window.addEvent('domready', function() {
    var mySlide = new Fx.Slide('panel');
    $('toggle').addEvent('click', function(e) {
        e = new Event(e); // this isn't needed in 1.2
        e.stop();
        mySlide.toggle();
        this.toggleClass('active');
    });
});

However, in MooTools 1.2 and later, Fx.Slide isn't included in the core – you'll have to download it as a part of MooTools More .

A working demo: http://jsbin.com/ewasa

Answer 2

Will this work?

function toggleSlide(){
    var theSlider = new Fx.Slide('slide');
    $('theSlide').addEvent('click', function(e){
        e = new Event(e);
        theSlider.toggle();
        e.stop();
    });
}