CODEWITHSUNDEEP
jqueryhtmlcss
Rob
Rob

Reputation: 6380

On click, slide div down and change button icon

I want to slide a div down from the top of the page when clicking a button - and also change the icon on the button. Then on clicking it again, I want the div to slide up (off the page) then change the button icon back to it's original state.

I have the div set to display:none, it slides down fine and the button changes icon but as soon as it slide into place it disappears! How can I stop that and also slide it up on clicking again?

Here's my attempt:

$('.menu-up').on('click', function(e) {
    $( ".icon-bar" ).slideDown( "slow", function() {
        // Animation complete.
    });

    $(this).toggleClass("menu-up menu-down")
    e.preventDefault();
});

Upvotes: 0

Views: 1589

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Use slideToggle instead.

DEMO

$('.menu-up').on('click', function(e) {
    $( ".icon-bar" ).slideToggle( "slow", function() {
        // Animation complete.
    });
    $(this).toggleClass("menu-up menu-down")
    e.preventDefault();
});

Upvotes: 1

Bryan Mudge
Bryan Mudge

Reputation: 432

Just did a fiddle. Check it out, I used slideToggle instead of slideDown for your on click.

$( ".icon-bar" ).slideToggle( "slow", function() {
    // Animation complete.
});

https://jsfiddle.net/okbndfeL/

Upvotes: 0

Henric Malmberg
Henric Malmberg

Reputation: 41

Try setting the height to 0 instead of display: none.

Upvotes: 0

Related Questions