jQuery - Sliding vertically aligned column

Question

Hello,

I have two columns, they are both floated to the left.

Inside the left column I have a 'trigger' to hide the right column, this makes the left column expand 100% when the right column is hidden. Right now I am able to make the right column appear back, but the problem is that the right column wraps under the left column (of course, the left column has 100% width) and not to next to it like it initially started.

I'm not a jQuery/JavaScript programmer, but I would think I'm in a good direction with my jQuery code.

Here's my HTML:

<div id="wrapper">
  <div id="left-col">
  <div id="trigger"><a href="#">Toggle</a></div>
    <p>...</p>
  </div>
  <div id="right-col">Right Column</div>
  <br class="clear">
</div>

This is the jQuery I have so far:

$(function() { 
  $("#left-col").addClass("wide80");
  $("#trigger a").click(function(){  
    $("#right-col").animate({width:'toggle'},350);
    $("#left-col").animate({width:'100%'},350); return false
   });
});

Any help you can give me would be greatly appreciated.

Thanks.

Answer 1

You could try this -- something along these lines should work

$(function() { 
    $("#left-col").addClass("wide80");
    $("#trigger a").click(function(){
        var leftCol = $("#left-col");

        if( leftCol.data('expanded') ) {
            leftCol.animate({width:'50%'},350);
            leftCol.data( 'expanded', false );
        } else {
            leftCol.animate({width:'100%'},350);
            leftCol.data( 'expanded', true );
        }

        $("#right-col").animate({width:'toggle'},350);

        return false;
    });
});

Answer 2

Final working code, thanks to Kerry:

$(function() { 
  $("#left-col").addClass("wide");
  $("#trigger a").click(function(){
    var leftCol = $("#left-col");

    if( leftCol.data('expanded') ) {
        leftCol.animate({width:'60%'},350);
        leftCol.data( 'expanded', false );
        $("#right-col").toggle(350);
    } else {
        leftCol.animate({width:'100%'},350);
        leftCol.data( 'expanded', true );
        $("#right-col").hide();
    }
    return false;
  });
});