JQuery toggle problem

Question

I'm using JQuery. I'm writing this as HTML code:

<li id="toggle"> 
      <a id="open" class="open" href="#">Log In | Register</a> 
      <a id="close" class="close" style="display: none;" href="#">Close Panel</a> 
</li>

and I'm writing a code like that:

$(document).ready(function() {

        // Expand Panel
        $("#open").click(function(){
            $("div#panel").slideDown("slow");
        }); 

        // Collapse Panel
        $("#close").click(function(){
            $("div#panel").slideUp("slow");
        });     

        // Switch buttons from "Log In | Register" to "Close Panel" on click
        $("#toggle a").click(function () {
            $("#toggle a").toggle();
        });     

    });

They problem is that, it's working in a file. And after that I copied in in another file and it will not working.

There is no duplicate ID or anything else in the document

Answer 1

Are you sure that you've changed the script tag to reference the new filename?

Answer 2

• Check that you have referenced jQuery correctly.
• Check for JavaScript errors.
• Use view source to verify that you are testing the correct version of the file, and not a older cached one.
• Validate your html with http://validator.w3.org/.
• Validate your JavaScript with http://www.jslint.com/.