Question

Hi in my html document I have a call to a jQuery function. The function of the jQuery call is to toggle a header slider bar.

This is the full link with jQuery call:

<img src="http://www.wpinsite.com/wp-content/themes/wpinsite/gfx/down.png" onclick="jQuery('#wpqn_down').slideUp(function(){jQuery('#wpqn').slideDown();});" alt="" />

What I would like to do is also add enother jQuery call as well but I am not sure into with part of the code to put it. This is the code that I want to add to the above click event.

$("body").animate({marginTop: "40px"}, 500 );

So in a nutshell I would like two tings to happen on each click or toggle. On the first click I would like the click event to toggle or hide the header bar and ALSO to contract the “body” margin-top by -40px and on the second click I would like it to display the header bar and also expand the “body” margin-top by 40px;

You can see an example of what I am trying to achieve by visiting my website http://www.wpinsite.com
At the top of the page you will see a yellow header bar. On the page load I have a piece of jQuery that expand the body tag by 40px. When you click the toggle arrow it hides the header bar but it doesn’t contact the margin-top by -40px.

I hope this makes sense. Any help would be greatly appreciated.

Answer 1

Add an id or class to your img tag like this:

<img class="downButton" src="http://www.wpinsite.com/wp-content/themes/wpinsite/gfx/down.png" alt="" />

Then do something like this in jQuery:

jQuery('img.downButton').click(function(){
  jQuery('#wpqn_down').slideUp(function(){
    jQuery('#wpqn').slideDown();
  });
  $("body").animate({marginTop: "40px"}, 500 );
});