Jquery - animate height toggle

Question

I have a 10px bar along the top of the screen that  when clicked  I want it to animate to a height of 40px and then if clicked again  animate back down to 10px  I tried changing the id of the div  but it isn t working  How could I get this to work  or is there a better way to do it   body html    lt div id  topbar-show  gt  lt  div gt   css    topbar-show   width  100   height  10px  background-color   000     topbar-hide   width  100   height  40px  background-color   000      javascript     document  ready function          topbar-show   click function          this  animate  height 40  200  attr  id    topbar-hide                topbar-hide   click function          this  animate  height 10  200  attr  id    topbar-show

User · Answer

I just thought to give you the reason why your solution did not work:

When $(document).ready() is executed only the $('#topbar-show') selector can find a matching element from the DOM. The #topbar-show element has not been created yet.

To get past this problem, you may use live event bindings

$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});

This is the most simple way to fix you solution. The rest of these answer go further to provide you a better solutions instead that do not modify the hopefully permanent id attribute.

User · Answer

Give this a try     document  ready function          topbar-show   toggle function          this  animate  height 40  200       function          this  animate  height 10  200

User · Answer

Very late but I apologize  Sorry if this is  inefficient  but if you found all the above not working  do try this  Works for above 1 10 also   lt script gt      document  ready function         var position  expanded            topbar   click function           if  position   expanded               this  animate  height  200px             position  collapsed           else             this  animate  height  400px             position  expanded                           lt  script gt

User · Answer

You can use the toggle-event docs  method to assign 2  or more  handlers that toggle with each click   Example  http   jsfiddle net SQHQ2 1       topbar   toggle function          this  animate  height 40  200     function          this  animate  height 10  200           or you could create your own toggle behavior   Example  http   jsfiddle net SQHQ2       topbar   click  function         var i   0      return function              this  animate  height    i   2    40   10  200

User · Answer

Worked for me       filter-mobile   click function        if      menuProdutos   height    gt  0              menuProdutos   animate            height  0          200        else             menuProdutos   animate            height  500          200

User · Answer

That would be a possibility    x000D   x000D    document  ready function    x000D        topbar   toggle function    x000D        this  animate  height 40  200   x000D        x000D    function    x000D        this  animate  height 10  200   x000D        x000D      x000D   topbar   x000D    width  100   x000D    height  10px  x000D    background-color   000  x000D    color   FFF  x000D    cursor  pointer  x000D    x000D   lt  DOCTYPE html gt  x000D       lt html gt  x000D       lt head gt  x000D         lt link href  http   ajax googleapis com ajax libs jqueryui 1 8 themes base jquery-ui css  rel  stylesheet  type  text css   gt  x000D         lt script src  https   ajax googleapis com ajax libs jquery 1 5 0 jquery min js  gt  lt  script gt  x000D         lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 jquery-ui min js  gt  lt  script gt  x000D       lt  head gt  x000D       lt body gt  x000D         lt div id  topbar  gt  example  lt  div gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

You should be using a class to achieve what you want   css    topbar   width  100   height  40px  background-color   000     topbar hide   height  10px      javascript       document  ready function            topbar   click function          if   this  hasClass  hide                this  animate  height 40  200  removeClass  hide            else              this  animate  height 10  200  addClass  hide

User · Answer

You can also use this trick  replace       topbar   click function      by    document  on  click     topbar   function      This will bind an event on a not loaded yet object

User · Answer

The below code worked for me in jQuery2 1 3      topbar   animate   height  toggle        Need not calculate your div height padding margin and borders  It will take care

[jquery] Jquery - animate height toggle

Examples related to jquery

Examples related to height

Examples related to jquery-animate

Examples related to attr