Convert MooTools to jQuery

[israel.hayes]

Hi,

I was using MooTools before and I'm kinda new to jQuery, I'd like to
know how you would modify this to use it in jQuery, Thanks,

- Israel

window.addEvent('domready', function()
{
    var Boites = $$('.Boite');

    Boites.each(function(Boite)
    {
        var Lien = Boite.getElement('a');

        Lien.addEvent('click', function()
        {
            var Boite = Lien.getParent();
            var Contenu = Boite.getElement('div');

            if(Contenu.style.display == "none")
            {
                Contenu.style.display = "block";
            }
            else
            {
                Contenu.style.display = "none";
            }
        });

        var Contenu = Boite.getElement('div');
        Contenu.style.display = 'none';
    });
});

[Brandon Aaron]

This should be the equivalent in jQuery code.

$(document).bind('ready', function() {

$('.Boite')

.find('div').hide().end()

.find('a')

.bind('click', function(event) {

$(this).parent().find('div').toggle();

})

});

--

Brandon Aaron

On Fri, Sep 5, 2008 at 12:38 PM, israel.hayes <israel.hayes@...> wrote:

Hi,

I was using MooTools before and I'm kinda new to jQuery, I'd like to
know how you would modify this to use it in jQuery, Thanks,

- Israel

window.addEvent('domready', function()
{
   var Boites = $$('.Boite');

   Boites.each(function(Boite)
   {
       var Lien = Boite.getElement('a');

       Lien.addEvent('click', function()
       {
           var Boite = Lien.getParent();
           var Contenu = Boite.getElement('div');

           if(Contenu.style.display == "none")
           {
               Contenu.style.display = "block";
           }
           else
           {
               Contenu.style.display = "none";
           }
       });

       var Contenu = Boite.getElement('div');
       Contenu.style.display = 'none';
   });
});

[real-5]

$(function(){
        $('.Boite').each(function(){
                $(this).find('div').hide();
        });

        $('.Boite a').click(function(){
                $(this).parent().find('div').toggle();
        });
})

On Sep 5, 1:38 pm, "israel.hayes" <israel.ha...@...> wrote:

> Hi,
>
> I was using MooTools before and I'm kinda new to jQuery, I'd like to
> know how you would modify this to use it in jQuery, Thanks,
>
> - Israel
>
> window.addEvent('domready', function()
> {
>     var Boites = $$('.Boite');
>
>     Boites.each(function(Boite)
>     {
>         var Lien = Boite.getElement('a');
>
>         Lien.addEvent('click', function()
>         {
>             var Boite = Lien.getParent();
>             var Contenu = Boite.getElement('div');
>
>             if(Contenu.style.display == "none")
>             {
>                 Contenu.style.display = "block";
>             }
>             else
>             {
>                 Contenu.style.display = "none";
>             }
>         });
>
>         var Contenu = Boite.getElement('div');
>         Contenu.style.display = 'none';
>     });
>
> });

[israel.hayes]

Thank you very much to both of you, I'm in your debt ;)
I prefer real method tho! hehe

Have a good day,

- Israel
---------------------

$(function(){
        $('.Boite').each(function(){
                $(this).find('div').hide();
        });

        $('.Boite a').click(function(){
                $(this).parent().find('div').toggle();
        });

})

>
> On Sep 5, 1:38 pm, "israel.hayes" <israel.ha...@...> wrote:
>
> > Hi,
>
> > I was using MooTools before and I'm kinda new to jQuery, I'd like to
> > know how you would modify this to use it in jQuery, Thanks,
>
> > - Israel
>
> > window.addEvent('domready', function()
> > {
> >     var Boites = $$('.Boite');
>
> >     Boites.each(function(Boite)
> >     {
> >         var Lien = Boite.getElement('a');
>
> >         Lien.addEvent('click', function()
> >         {
> >             var Boite = Lien.getParent();
> >             var Contenu = Boite.getElement('div');
>
> >             if(Contenu.style.display == "none")
> >             {
> >                 Contenu.style.display = "block";
> >             }
> >             else
> >             {
> >                 Contenu.style.display = "none";
> >             }
> >         });
>
> >         var Contenu = Boite.getElement('div');
> >         Contenu.style.display = 'none';
> >     });
>
> > });

[Karl Swedberg-2]

hmmm. Israel, looks like you started two threads for this question. 

Also, did you notice that my code and Brandon's are nearly identical? 

Mine:

$(document).ready(function() {

  $('.Boite')

  .find('div').hide()

  .end()

  .find('> a').click(function() {

    $(this).parent().find('div').toggle();

    return false;

  });

});

Brandon's: 

$(document).bind('ready', function() {

$('.Boite')

.find('div').hide().end()

.find('a')

.bind('click', function(event) {

$(this).parent().find('div').toggle();

})

});

They're more efficient than real's. The explicit iteration with .each() is unnecessary, as is the repeated creation of a jQuery object.

But, real's will work, too. Either way, you're probably going to need the "return false;" line in the click handler to prevent the default action of the clicked link.

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Sep 5, 2008, at 2:37 PM, israel.hayes wrote:

Thank you very much to both of you, I'm in your debt ;)
I prefer real method tho! hehe

Have a good day,

- Israel
---------------------

$(function(){
       $('.Boite').each(function(){
               $(this).find('div').hide();
       });

       $('.Boite a').click(function(){
               $(this).parent().find('div').toggle();
       });

})

On Sep 5, 1:38 pm, "israel.hayes" <israel.ha...@...> wrote:

Hi,

I was using MooTools before and I'm kinda new to jQuery, I'd like to

know how you would modify this to use it in jQuery, Thanks,

- Israel

window.addEvent('domready', function()

{

    var Boites = $$('.Boite');

    Boites.each(function(Boite)

    {

        var Lien = Boite.getElement('a');

        Lien.addEvent('click', function()

        {

            var Boite = Lien.getParent();

            var Contenu = Boite.getElement('div');

            if(Contenu.style.display == "none")

            {

                Contenu.style.display = "block";

            }

            else

            {

                Contenu.style.display = "none";

            }

        });

        var Contenu = Boite.getElement('div');

        Contenu.style.display = 'none';

    });

});