• Recent Questions
  • Popular Questions

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:

// 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
}
});
});

Div:



Email:
Confirm Email:
Username:
Password:
Confirm Password:
Gender:
Male
Female

    Clugsworth
    Posted 9 months ago

    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(“fast… // slide it down
    You didn’t close your quotations nor your parenthesis on the function. It should be:
    $(‘div.register’).next().slideDown(“fast…”) // slide it down

    and

    if ($(‘div.register’).next().is(“:hidden”)) {
    $(‘div.register’).next().slideDown(“fast… // 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:

    // 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
    }
    });
    });

    Don’t forget to import jQuery BEFORE your script!

Answer this Question :

You must be logged in to post an answer. Signup Here, it takes 5 seconds :)

Other Questions