CODEWITHSUNDEEP
jqueryslidedownslideup
Glenn Curtis
Glenn Curtis

Reputation: 659

Sliding Issues With Jquery

I have had a look around but I can not seem to find any one else with the same issue as me. I want to be able to slide a box, which will hold my menu links, up and down on a users click.

My code below sort of works, as it does slide down when clicked, then slides back up when clicked again. However when you click the button a second time, it does not stay down, it just slides right back up again!

$(document).ready( function() {
  $('#Link').click(function() {
      $('#Box').slideDown('slow', function() {   
      $('#Link').click(function() { $('#Box').slideUp('slow')  });   });
  });
});

Upvotes: 1

Views: 105

Answers (2)

Roel van Roozendaal
Roel van Roozendaal

Reputation: 184

Try to use toggle,

$('#menu_button').toggle(
    function () {
        $('#playfield').animate({ left: constantMenuWidth }, 500, function (e) {
            $('#menu_button').html('<img id="menu_button" src="images/menu_button.png" width="80" height="29" />');
        });
    },
    function () {
        $('#playfield').animate({ left: 0 }, 500, function (e) {
            $('#menu_button').html('<img id="menu_button" src="images/menu_button.png" width="80" height="29" />');
        });
    }
);

Upvotes: 2

user2109659
user2109659

Reputation:

use .slideToggle()

$('#Link').click(function() {
    $('#Box').slideToggle('slow', function()
    {
        // Animation complete.
    });
});

Upvotes: 1

Related Questions