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:

<div id="topbar-show"></div>

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');
  });
});

Please do not change the id of the element. Please do toggle a class i.e.
, $("#topbar").toggleClass('hidden'); — Aleksi Yrttiaho, Feb 11 '11 at 02:30

score 69 · Accepted Answer · answered Feb 11 '11 at 02:36

69

Give this a try:

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});

answered Feb 11 '11 at 02:36

Ian Christian Myers

1,270
9
14

It wasn't. I just took longer to type mine up and submit it. (All of the answers came in between when I viewed the question and submitted my answer.) – Ian Christian Myers Feb 11 '11 at 02:43
6

Note that this kind of toggle has been deprecated since jQuery 1.9.1, and will not work as it once did. For versions >= 1.9.1, [something along these lines will work](http://stackoverflow.com/a/4965040/1813830) – Ragamffn Sep 25 '13 at 00:33

score 18 · Answer 2 · edited Nov 19 '13 at 23:33

18

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');
      }
    });
  });

edited Nov 19 '13 at 23:33

Remy Lebeau

555,201
31
458
770

answered Feb 11 '11 at 02:27

Nathan Anderson

6,768
26
29

Very easy to implement, Thank you for contribution. – Vipertecpro Jul 03 '19 at 18:38

user113716 · Answer 3 · 2011-02-11T02:30:14.067

17

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);
    }
})());

edited Feb 11 '11 at 02:30

answered Feb 11 '11 at 02:24

user113716

318,772
63
451
440

2

+upvote : @user113716 : can u plz explain in details (2nd solution) – Developer Apr 01 '15 at 09:35

score 3 · Answer 4 · edited Dec 12 '13 at 13:46

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

<script>
  $(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';
      }
    });
   });
</script>

score 2 · Answer 5 · answered Sep 25 '15 at 20:05

2

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.

answered Sep 25 '15 at 20:05

Mahesh B

143
2
13

score 2 · Answer 6 · edited Jul 05 '18 at 02:26

That would be a possibility:

$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:40},200);
  }, 
  function(){
    $(this).animate({height:10},200);
  });
});

#topbar {
  width: 100%;
  height: 10px;
  background-color: #000;
  color: #FFF;
  cursor: pointer;
}

<!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="topbar"> example </div>
    </body>
    </html>

how i do this to go from height 10 to height 100% – Benjamin Karami Dec 27 '19 at 14:42 — Benjamin Karami, Dec 27 '19 at 14:42

score 1 · Answer 7 · answered Jun 07 '13 at 07:42

1

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... ;)

answered Jun 07 '13 at 07:42

Bronco

11
1

score 1 · Answer 8 · edited Jan 31 '17 at 13:27

1

Worked for me:

$(".filter-mobile").click(function() {
   if ($("#menuProdutos").height() > 0) {
      $("#menuProdutos").animate({
         height: 0
      }, 200);
   } else {
      $("#menuProdutos").animate({
         height: 500
      }, 200);
   }
});

edited Jan 31 '17 at 13:27

Merec

2,751
1
14
21

answered Jan 31 '17 at 13:13

Elliot

11
1

score 1 · Answer 9 · edited Dec 12 '13 at 13:43

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.

Jquery - animate height toggle

9 Answers9

Linked

Related