CODEWITHSUNDEEP
jquery
Dean Pauley
Dean Pauley

Reputation: 35

jquery .slidedown

I'm new 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*

Upvotes: 1

Views: 1149

Answers (4)

Shawn31313
Shawn31313

Reputation: 6062

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

Upvotes: 1

AlexBay
AlexBay

Reputation: 1313

Your code executes both if statements! Do this:

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

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

});

Upvotes: 0

James Allardice
James Allardice

Reputation: 166071

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.

Upvotes: 2

Sarah West
Sarah West

Reputation: 2037

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

Upvotes: 1

Related Questions