jquery .slidedown

I'm new 开发者_StackOverflow社区to jquery and i'm trying to use the .slidedown function on a drop down menu. I want the menu to open when clicked and close when option or menu is clicked again. However when the menu is clicked as it is, it simply bounces open and closed rather than staying open. Here is the code:

*(function($) {



/*  $('#drop').click(function() {
        if (paneldown == false) {
            $('#ddd').slideUp(5000);
            paneldown = false;
        }
        if(paneldown != false) {
            $('#ddd').slideDown(5000);
            paneldown = true;
        }
                              });

    */                       
    var paneldown = false;

   $('#drop').click(function() {
        if(paneldown == false) { $('#ddd').slideDown(500); paneldown = true; }

        if(paneldown == true) { $('#ddd').slideUp(500);  paneldown = false;}
      //$('#ddd').toggle(5000), (function() {
//      });
    });
})(jQuery);
// JavaScript Document*

Use slideToggle instead:

$('#drop').click(function() {
    $('#ddd').slideToggle(500);
});

That handles the state for you, so you don't need to worry about it. The problem with your existing code is that first you run slideDown, and set paneldown to true. Then straight after you check if paneldown == true (which it is; you just set it that way) so it runs slideUp.

If you would still like to use the if statment then do this:

var paneldown = false;
  $('#drop').click(function () {
          if (paneldown == false) {
              $('#ddd').slideDown(500);
              paneldown = true;
          } else {
              $('#ddd').slideUp(500);
              paneldown = false;
          }
  });

It wont work if you try using two ifs but I dont recommend using ifs for something like this. use:

$('#drop').click(function() {
    $('#ddd').slideToggle(500);
});

You mustn't deal with if statements if you would use this instead:

$('#drop').click(function() {
     $('#ddd').slideToggle(500); 
 });

And by the way, your menu is just sliding up because you used two if statements. In the first case "paneldown" is "false". The menu slides down. Now you are setting "paneldown" to "true". Now you have your second if statement and "paneldown" is now "true" so it slides up. If you want to keep your if statements, you should use an if-else-construction:

$('#drop').click(function() {
        if (paneldown == false) {
            $('#ddd').slideUp(5000);
            paneldown = false;
        }
        else {
            $('#ddd').slideDown(5000);
            paneldown = true;
        }
});

Your code executes both if statements! Do this:

$('#drop').click(function() {

        if(paneldown) { $('#ddd').slideUp(500);  paneldown = false;}
        else { $('#ddd').slideDown(500); paneldown = true; }

});