Toggle width with jQuery

Question

How do I toggle the width of a div with animation? My goal is to change the width when I click on the blue div.

$(document).ready(function() {
  $('#toggle-button').click(function() {
    $('#toggle').toggle(function() {
      $('#toggle').animate({
        width: "200px"
      });
    }, function() {
      $('#toggle').animate({
        width: "300px"
      });
    });
  });
});

#toggle {
  height: 200px;
  width: 200px;
  background: red;
}

#toggle-button {
  height: 20px;
  width: 20px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="toggle-button"></div>
<div id="toggle"></div>

Answer 1

The issue with your code is due to the use of the (now deprecated) toggle() event handler. You can implement the logic yourself using click(), though:

$(document).ready(function() {
  $('#toggle-button').click(function() {
    var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
    $('#toggle').animate({ width: toggleWidth });
  });
});

#toggle {
  height: 200px;
  width: 200px;
  background: red;
}

#toggle-button {
  height: 20px;
  width: 20px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="toggle-button"></div>
<div id="toggle"></div>

---

- 2022 Update -

The better approach would now be to toggle the class on successive clicks, using toggleClass(), and use CSS transition to animate the width:

jQuery($ => {
 $('#toggle-button').on('click', e => {
  $('#toggle').toggleClass('foo');
 });
});

#toggle {
  height: 200px;
  width: 200px;
  background: red;
  transition: width 0.3s;
}

#toggle.foo {
  width: 300px;
}

#toggle-button {
  height: 20px;
  width: 20px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="toggle-button"></div>
<div id="toggle"></div>

Answer 2

Type Coercion Warning

Using $("#toggle").width() == 800 can result in unexpected type coercion.

Instead, consider using the following:

var foo = $("#toggle").width();
var bar = foo === 0 ? "100%" : "0";

Note the type and value comparison operator === comparing the value of input.width() to the numerical primitive 0. As input.width() evaluates to a value of the primitive type number, when it is equal to 0 this condition will return true.

The practice of using a value comparison operator == side-steps the JavaScript type system, which has the potential to lead to unexpected bugs. Although it is less dangerous within a conditional statement, there is still a risk of unexpected behavior. Please see this article for more information on type coercion.

Answer 3

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-enlarge">Click here</div>
<div class="box">box</div>

Answer 4

Try This: It Work on All versions of Jquery || jquery 1.10.1 || to || jquery 2.1.4 ||

Script

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
            $(document).ready( function(){
            $('#toggle-button').click( function() {
            var toggleWidth = $("#toggle").width() == 800 ? "0px" : "800px";
            $('#toggle').animate({ width: toggleWidth });
            });
            });
    </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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Toggle Width with jQuery</h1>
<input id="toggle-button" type="button" value="Click me!"/>
<div id="toggle"></div>

Answer 5

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

});

Answer 6

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

Live DEMO

Answer 7

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)