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');
});
});
This question is related to
jquery
height
jquery-animate
attr
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>
Worked for me:
$(".filter-mobile").click(function() {
if ($("#menuProdutos").height() > 0) {
$("#menuProdutos").animate({
height: 0
}, 200);
} else {
$("#menuProdutos").animate({
height: 500
}, 200);
}
});
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');
}
});
});
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... ;)
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.
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);
}
})());
That would be a possibility:
$(document).ready(function(){_x000D_
$("#topbar").toggle(function(){_x000D_
$(this).animate({height:40},200);_x000D_
}, _x000D_
function(){_x000D_
$(this).animate({height:10},200);_x000D_
});_x000D_
});#topbar {_x000D_
width: 100%;_x000D_
height: 10px;_x000D_
background-color: #000;_x000D_
color: #FFF;_x000D_
cursor: pointer;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>_x000D_
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<div id="topbar"> example </div>_x000D_
</body>_x000D_
</html>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.
Source: Stackoverflow.com