jQuery Animation Reverts Unintentionally - css

Question

Over the weekend, I've been working on a project that has a nav column and a main column. THe nav column has a toggle button. When the toggle button is pressed, I want to animate the shrinking and expanding of the column. In an effort to do that, I've created a jsfiddle which can be found here. My relevant HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; toggle
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
The relevant JavaScript looks like this:
var isOpen = true;
function toggleNav() {
var options = {};
if (isOpen === true) {
options = { to: { width: 56 } };
} else {
options = { to: { width: 114 } };
}
$("#navDiv").effect("size", options, 500);
isOpen = !isOpen;
}
As the example shows, the column performs the shrinking animation. However, the column doesn't stay shrunk. It snaps back to its original size. How do I make the animation change the width of navDiv from one size to another and make it stay there?
Thank you

Answer 1

You could simplify this a bit by using .animate() and checking the width of the #navDiv.
Working Example
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
I'm not sure if there is any real performance gain or if its just a personal preference, but I usually try to avoid using the inline onclick.
So the above code could be written as:
Working Example 2
toggle
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
$('#toggle').click(toggleNav);