Question

This is my jQuery:

$('#help').toggle(function () {
  $('#center').animate({
    paddingTop: '70px'
  }, 200);
  $('.child_help').slideDown(300);
}, function () {
  $('#center').animate({
    paddingTop: '50px'
  }, 200);
  $('.child_help').slideUp(300);
});

When I load the page, it instead toggles the visibility of #help. What I want to do is when you click it, it should slide .child_help either up or down, and do some padding animations.
On the jQuery API, it only says this:
Note: jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

The only difference that I can see between what would fire the event, or toggle the visibility, is if it’s $('#help').toggle(function () { do something here }), instead of $('#help').toggle('slow');

Is there something I’m missing here?

Edit: The following is my HTML

<div id="center">
  <div class="child_help">
    some help text here
  </div>
  <div class="child">
    <b>Account Activation</b>
    <img src="/css/images/help.png" alt="" id="help" />
  </div>
  <form method='post'>
    <input type="text" name="code" value="Code" class="code" />
    <span class="case">Case-sensitive</span>
    <input type="submit" name="submit" value="Activate" class="submit" />
  </form>
</div>

Answer 1

Demo

$(function(){
  $("#help").click(function(){
     var padding="70px";
     if($(".child_help").css("display")=="none") padding="50px";

     $('#center').animate({
         paddingTop: padding
     }, 200);

     $(".child_help").slideToggle();
  });
});