Question

I have the following code

<h1>Heading</h1>
<div>Content to be displayed</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.

Answer 1

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.