jQuery : Error: $("#div.close") is null

May be a quick one for you jQuery Experts. I've written my own animate / popout script. But when implementing it into my pa开发者_如何学JAVAge, I'm getting an error -

Error: $("#boxWrapper .close") is null

Any ideas why?

My full code is here : jsfiddle

Cheers

Here is a working example

 $(document).ready(function() {
    $('#boxWrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        $('#boxWrapper .button').click(
        function() {

            if (panel1) {
                $('#boxWrapper .open').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                $('#boxWrapper .open').animate({"opacity": "1.0"}, "slow");
                $('#boxWrapper .close').animate({"opacity": "0.0"}, "slow");
                $('#boxWrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
        }
        }
        );    
        });

Get rid of the <script> tags in the JS part. Those are syntax errors. Your JS code will be placed lovingly in an appropriate setting by jsfiddle itself.

Also get rid of the <script> block that's copied into the HTML part.

Then, you need to define the "panel1" variable.

Also all those tags (joomla?) aren't going to do anything at all in jsfiddle.

edit — given that all these problems stem from what appears to be just lack of familiarity with how jsfiddle works, none of these are likely to be your actual problem. So now you know. Anyway, what's most likely the issue is that you're trying to use jQuery before it's available on the page. Without seeing your real code, however, it's hard to say.

Right guys. Thanks for the answers, Sorry for the poor use of jFiddle. But I feel that it did need to include the Joomla as that was actually the main issue.

Joomla also use's Mootools JSLibrary,

So I needed to set a noconflict(); for jQuery. and change all references of $ to jQuery.

The actual answer to the code is replace all references of $ with jQuery.

jQuery(document).ready(function() {
    jQuery('#boxwrapper .close').css({"opacity": "0.0"});
    var panel1 =true;
        jQuery('#boxwrapper .button').click(
        function() {

            if (panel1) {
                jQuery('#boxwrapper .open').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "-=200px"}, "slow", function() {panel1 = false;});
            }
            else {
                jQuery('#boxwrapper .open').animate({"opacity": "1.0"}, "slow");
                jQuery('#boxwrapper .close').animate({"opacity": "0.0"}, "slow");
                jQuery('#boxwrapper').animate({"left": "+=200px"}, "slow", function() {panel1 = true;});
     }
   }
 );    
});

There is markup problems, and I think the selector is not the best one to have

http://api.jquery.com/child-selector/