Question

I’m using the following jQuery code to show a notification at the top the page with a sliding animation:

// Notification
$j("#notification").animate({
    height: "21px",
    opacity: 1,
    'padding-top': "8px"
}, 800 );

$j("#close-button").click( function() {
    $j("#notification").animate({
      height: "0px",
      opacity: 0,
      'padding-top': "0px"
    }, 800 );
});

Live example:

http://www.taiwantalk.org/

Right now, you can just collapse the notification. But I would like to add a button that enables you to expand it and collapse it.

How to do that?

Answer 1

.slideToggle() would seem to be very convenient here.

EDIT : Using .slideToggle()

Provided that you’ve got an HTML element like the following:

<style type='text/css'>
#foo { height:100px; padding:10px; background-color:#fafafa; }
</style>
<div id='foo'>Ohayou Sekai!</div>
<button id='bar'>SLIDE!</button>

You can make it slide out of sight / slide back in using .slideToggle(). For example, we’re going to hook that in to a button’s click event:

$('#bar').click(function() {
    $('#foo').slideToggle('fast');
});

It automatically decides whether or not it should slide to hide or slide to show for you.

Here’s a demo as well.