Making a div to move up and down on clicking it

I have the following code

<h1>Heading</h1>
<div>Content to be displayed&开发者_StackOverflow中文版lt;/div>

Now on clicking h1 the whole and should move upwards and again on clicking h1 both should come down.How can i achieve this.I used jquery toggle function to move div up and down but I also want h1 to move upwards.

First, it'd be easiest to animate a container element.

You could use jQuery to wrap them.

var container = $('h1, div').wrapAll('<div />').parent();

Then you would give that container display: relative. You could do it with an external stylesheet (recommended), or with jQuery.

container.css('position', 'relative');

Then you could attack a click handler to that container.

container.toggle(
function() {
   $(this).animate({ top: '-=20px' }, 500);
},
function() {
   $(this).animate({ top: '+=20px' }, 500);
});

jsFiddle.

What both elements in a div and make that div move up and down.

<div>
  <h1>Heading</h1>
  <div>Content to be displayed</div>
</div>