jquery 3.6.0 animate width to specific size not working

Question

I have this jsfiddle:

$('.btn').click(function() {
  if ($('nav').hasClass('open')) {
    $('nav').removeClass('open');
    $('.hide').animate({
      width: '508px'
    });
  } else {
    $('nav').addClass('open');
    $('.hide').animate({
      width: 'toggle'
    });
  }
})

where I'm trying to get a side navbar to just show icons then when the button is clicked to animate to get a specific width.

While the toggling works and it's getting the desired width, it's not animated.

Any ideas?

Answer 1

Consider the following.

https://jsfiddle.net/Twisty/ck7y19rz/6/

JavaScript

$('.btn').click(function(event) {
  $("nav").toggleClass("open");
  if ($("nav").hasClass("open")) {
    $(".hide").show().animate({
      width: "580px"
    });
  } else {
    $(".hide").animate({
      width: "0px"
    }, function() {
      $(".hide").hide();
    });
  }
});

This is largely just cleaned up code. As was commented, when you animate back to the original size, it must use a Width value, not a keyword, like auto. I also added .show() and .hide() to ensure the state of the element is returned to the expected visible state.