How do I toggle the width of a div with animation?
HTML:
css:
#toggle{ height:200px; width:200px; background:red; } #toggle-button{ height:20px; width:20px; background:blue; } jQuery:
Example that doesn't work: http://jsfiddle.net/ZfHZV/1/
Edit: My goal is to change the width when I click on the blue div
Try this:
$(document).ready( function(){ $('#toggle-button').click( function() { var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px"; $('#toggle').animate({ width: toggleWidth }); }); }); Dude! your code works, you just don't understand what it does...
$('#toggle-button').click( function() { // Execute when the toggle button is clicked. $('#toggle').toggle(function() { // Attach toggle function that fire different // callback when clicked. $('#toggle').animate({width:"200px"}); }, function() { $('#toggle').animate({width:"300px"}); }); }); Click on the blue div and then on the red div couple of time and see how it works.
Note that you better attach the toggle click callbacks with one instead of click to avoid multiple callback of clicks:
$('#toggle-button').one('click', function() { $('#toggle').toggle(function() { $('#toggle').animate({width:"200px"}); }, function() { $('#toggle').animate({width:"300px"}); }); }); There are two jQuery methods called toggle. One toggles visibility, which isn't relevant here. The other applies a click handler, which fires functions alternately. This is what you are using. However, you're using it wrong.
What you're actually doing is waiting for #toggle-button to be clicked, then you bind a click handler to #toggle. So the animation would occur whenever #toggle was clicked after the first time #toggle-button was clicked. (The situation would get more complicated after multiple clicks on #toggle-button.
You want to use toggle directly on #toggle-button:
$('#toggle-button').toggle(function() { //fired the first time $('#toggle').animate({width:"200px"}); }, function() { // fired the second time $('#toggle').animate({width:"300px"}); }); Working code (nb that since you start at 200px, the first click appears to do nothing)
Using JQuery 2.1.1 and setting width and transition with CSS. Also works with percentage width, color change, etc.
$('#button-enlarge').on('click', function () { $('.box').toggleClass('expanded'); });.box.expanded { background-color: #e99; transition: all .3s; width: 100%; } .box { width: 40%; transition: all .3s; background-color: #f00; color: #fff; height: 140px; } #button-enlarge { padding: 10px 15px; border: 1px solid #999; display: inline-block; } boxTry This: It Work on All versions of Jquery || jquery 1.10.1 || to || jquery 2.1.4 ||
Script
$(document).ready( function(){ $('#toggle-button').click( function() { var toggleWidth = $("#toggle").width() == 800 ? "0px" : "800px"; $('#toggle').animate({ width: toggleWidth }); }); });#toggle{ height:200px; width:0px; background:red; }Toggle Width with jQuery
$('#toggle-button').one('click', function() { $('#toggle').animate({ width: 'toggle'}, 1000); }); this toggle 0 to your defined width
i tried this and work
$("#searchIcon").click(function(){ var toggleWidth = "0px"; if($("#searchbox").width() == 118) { toggleWidth="0px"; } else { toggleWidth="120px"; } $('#searchbox').animate({ width: toggleWidth }); });