How do you select a CSS class in Scriptaculous JavaScript?

Here’s a snippet of my code:

<div class="myclass" id="demo" style="display:none;">Hello.</div>

<a href="#" onclick="$('.myclass').fade({ duration: 0.3, from: 1, to: 0 }); $('demo').appear({ delay: 0.35 }); return false;">Click ME!</a><br />

My Firebug development plugin says:

$(“.myclass”) is null

I have tried various other names, such as: $('div.myclass') and $('myclass'), to no avail. How do I get this effect to work on a class? Thanks!

Answer

$$('.myclass')[0].fade()

$$ in prototype (and mootools) accepts any sort of css selector like $$('div#joe') or $$('a[rel=awesome]') and returns an array.

$ will return just an element with a matching id like $(‘joe’);

So given this html:

<div id="joe" class="awesome"></div>
<div id="sally" class="awesome"></div>

1. $$('.awesome') will return an array containing both DIVs
2. $('joe') and $$('#joe') are effectually the same (though the latter is an array).

---

EDIT

First remove your onclick events and add some information to the rel attribute like so:

<a rel="demo" href="#">Div 1</a><br />
<a rel="demo2" href="#">Div 2</a><br />
<a rel="demo3" href="#">Div 3</a>

Then put this in the head of your document in a script tag.

document.observe("dom:loaded", function() {
    // this makes sure the document is loaded and ready to be manipulated       

    // store your links and demo DIVs in arrays
    var links = $$('div.rightcol a');
    var demos = $$('.myclass');

    // enumerate over the links
    links.each(function(link){
        // observe the click event of the current link in the loop
        link.observe('click',function(event){
            event.stop();
            // loop the demo DIVs and fade each one
            demos.each(function(demo){
                demo.fade({ duration: 0.3, from: 1, to: 0 });
            });
            // figure out which demo to fade in from the links rel attribute
            var target = link.readAttribute('rel');
            // get the demo target and fade it in
            $(target).appear({ delay: 0.35 });
        });
    });

});

I hope the script is easy to follow.