Q:

animating width of div using percentages width Jquery

I have the following working code and I want to change it as so it uses percentages for width intead of 400px. How could I acomplish that?
Specifically, I want it to go from an intial width of 25%  to 0 and back to 25% once the button is clicked again. 
Also, using the same show_hide_button how could I change the width of an aditional div as so it will switch between 75% and 100%. 75% intial, 100% when button is clicked and back to 75% when button is clicked again. 
Here is what I have: 
$(document).ready( function(){
    $('#show_hide_button').click( function() {
        var toggleWidth = $("#some_box").width() == 400 ? "0" : "400px";
        $('#some_box').animate({ width: toggleWidth });
    });
});

I will really appreciate any help! 

A:

Here you go:
Update: This should work
CSS:
#some_box {
    background: #fc0;
    width: 25%;
    height: 100px;
}
#some_other_box {
    background: #0cf;
    width: 75%;
    height: 100px;
}

JS:
var collapsed = false;
$('#show_hide_button').click(function() {
    if(!collapsed){
        $('#some_box').animate({width: '0%'});
        $('#some_other_box').animate({width: '100%'});
    } else {
        $('#some_box').animate({width: '25%'});
        $('#some_other_box').animate({width: '75%'});
    }
    collapsed = !collapsed;
});

http://jsfiddle.net/moderndegree/xLHb8/
original answer:
$(document).ready( function(){
    $('#show_hide_button').click( function() {
        $('#some_box').animate({ width: 'toggle' });
    });
});

http://jsfiddle.net/moderndegree/xLHb8/1/

