How to wrap jQuery function in a div?

JQuery div hide/show problem..?

• So I have a hidden div that I'm trying to hide and show with a toggle button, but when I press the toggle button nothing happens. Javascript code: <script language="javascript" type="text/javascript"> // run the function below once the DOM(Document Object Model) is ready $(document).ready(function() { // trigger the function when clicking on an assigned element $(".toggle").click(function () { // check the visibility of the next element in the DOM if ($('div.register').next().is(":hidden")) { $('div.register').next().slideDown("fast… // slide it down } else { $('div.register').next().slideUp("fast")… // hide it } }); }); </script> Div: <span class="toggle"> <button>Register</button> </span> <div id="register" style="display: none;"><hr/> <form style="margin-left: 2px;" method="post" action=""> Email: <input type="email" name="email" id="email"/><hr/> Confirm Email: <input type="email2" name="email2" id="email2"/><hr/> Username: <input type="text" name="usernam" id="usernam"/><hr/> Password: <input type="password" name="passwor" id="passwor"/><hr/> Confirm Password: <input type="password" name="passwor2" id="passwor2"/><hr/> Gender: <input type="radio" id="sex" name="sex" value="male" />Male <input type="radio" id="sex" name="sex" value="female" />Female <hr/> <input type="submit" value="Sign Up"/> </form> </div>

• Answer:

  I can see three obvious problems. $(".toggle").click(function () { You added a space between function and the parenthesis. I'm not sure whether this is an actual problem, or it just seems to trouble me when I do it. It should be: $(".toggle").click(function() { , $('div.register').next().slideDown("fa… // slide it down You didn't close your quotations nor your parenthesis on the function. It should be: $('div.register').next().slideDown("fa… // slide it down and if ($('div.register').next().is(":hidden")) { $('div.register').next().slideDown("fa… // slide it down } else { $('div.register').next().slideUp("fast… // hide it } First, you have .register, which means the class is register. You need #register, because # means ID. Second, you should put a space between div and #register. Third, you need to remove next(), as that won't make the div itself slide down, but simply the div after it. All in all, your code will be: <script language="javascript" type="text/javascript"> // run the function below once the DOM(Document Object Model) is ready $(document).ready(function() { // trigger the function when clicking on an assigned element $(".toggle").click(function() { // check the visibility of the next element in the DOM if ($('div #register').is(":hidden")) { $('div #register').slideDown("fast…") // slide it down } else { $('div #register').slideUp("fast")… // hide it } }); }); </script> Don't forget to import jQuery BEFORE your script!