html - animating width of div using percentages width Jquery -

I have the following working code and I want to change it so that it uses a percentage of 400px width intended. How can I do this? In particular, after clicking the button again, I want to get it back from 25% to intense width and up to 25%. In addition, using the same show_hide_button, how can I change the width of an optional div so that it can switch between 75% and 100%. 75% Ital, 100% button is clicked and 75% button is clicked again

What do I have here:

  $ (document) ) .ready (function () {$ ('# show_hide_button'). Click (function () {var toggleWidth = $ ("# some_box"). Width () == 400? "0": "400px"; $ ('# Some_box'). Animate ({width: toggleWidth});});});   
 I really appreciate any help!   
 
 
 Here you go:  
  Update : this Should work  
 CSS:  
  #some_box {background: # fc0; Width: 25%; Height: 100 pixels; } #some_other_box {background: # 0 cf; Width: 75%; Height: 100 pixels; }   
 JS:  
  var collapsed = false; $ ('# Show_hide_button') Click (function () {$ ('# some_box'). {Animate ({width: '0%'}); $ ('# some_other_box'). (Width: '100%'}) ;} Other {$ ('# some_box'). Animate ({width: '25% '}); $ (' # some_other_box '). Animate ({width: '75%'});} Collapsed =! Gone;});   
  
  Original Answer :  
  $ (document) .ready (function () {$ ('#show_hide_button'). (Function () {$ ('# some_box'). Animate ({width: 'toggle'});});});