Jquery toggle event toggles visibility instead

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>

the toggle event handler was deprecated in 1.8 and has been removed in 1.9 http://api.jquery.com/toggle-event/ — wirey00, Feb 19 '13 at 16:45
if you're using a newer version of jquery, this toggle method will not work: http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event — PlantTheIdea, Feb 19 '13 at 16:45
@chrinsen it does at the very top header.. it says version deprecated 1.8, removed 1.9.. What you can do is bind it to a click handler and do your animations there — wirey00, Feb 19 '13 at 16:49

Kaizen Programmer · Accepted Answer · 2013-02-19T16:50:49.013

0

Demo

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

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

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

edited Feb 19 '13 at 16:50

answered Feb 19 '13 at 16:45

Kaizen Programmer

3,798
1
14
30

The only reason I didn't use that was because I want to animate some css too. But other than that, this would work. – chrinsen Feb 19 '13 at 16:48
I added the css animations you have in your question. – Kaizen Programmer Feb 19 '13 at 16:51

Jquery toggle event toggles visibility instead

1 Answers1