jquery (reverse) speed on toggled class (jsfiddle ex)

Question

I have a quick question about jquery's toggle speed that I cannot implement in this particular case:

• I have two columns. A red one is hidden at first; the other (blue) takes up the entire width.
• Clicking the button: my code makes the first one shrink to two-third in order to make room for the second one which is one-third of the width.
• As you can see, the second (red) column appears with a smooth transition (1000ms). But the second click is an abrupt return to the initial state.

My question:

How could I implement in my code something that would make the second click also go slower and not so abruptly?

Here is the fiddle.

$(document).ready(function() {
    $('#side').hide()
}),
$("#btn").click(function() {
    $('#main').toggleClass('two-thirds');
    $("#side").toggle(1000);
});

Answer 1

You could use .animate() or CSS3 Transitions, depending on your client base.

Jquery .animate() http://api.jquery.com/animate/

CSS3 Transitions: http://www.w3schools.com/css/css3_transitions.asp