CODEWITHSUNDEEP
jquery
fightstarr20
fightstarr20

Reputation: 12568

jQuery Slide down when clicked

I am using the follow jsfiddle to slide a div down when an element is clicked...

$(document).ready(function() {

    // Initial variables
    var panel = $('#panel');
    var panelHeight = panel.height();

    // Set the height to 0
    panel.height(0);

    // Animate it to its initial size
    $('a').click(function(e) {
        e.preventDefault();
        $('#panel').animate({'height' : panelHeight});
    });
});

http://jsfiddle.net/3fsQr/

I can't work out how to made it disappear again when the element is clicked once more. Can anyone help?

Upvotes: 0

Views: 33

Answers (3)

Dipesh Rana
Dipesh Rana

Reputation: 367

Best Solution is to set the #panel div to display:none and then slideToggle it... 

 $('a').click(function(e) {
     $('#panel').slideToggle();
 });

Upvotes: 1

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

I offer you an alternative:

set the #panel to display: none;

then you can use slideToggle() and you can keep that sliding effect: Demo

if you'd like to continue using your way with animate, I've updated your fiddle so it works: Demo

Upvotes: 1

Jayababu
Jayababu

Reputation: 1621

Better you can use jquery toggle. http://api.jquery.com/toggle/ 

$('a').click(function(e) {
        e.preventDefault();
        $('#panel').toggle();
    });

No need to keep height as '0' and original height everytime.

Upvotes: -1

Related Questions