I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However, I also want to keep a small portion of the first column visible for users to click and bring it back in view.
Here is a link to my code snippet: http://jsfiddle.net/VJmfq/
Currently, I have encountered an issue where the first column does not move unless I completely hide its content or animate the width to 0px (which I want to avoid as I want some content to remain visible). I attempted to animate the inner content's width, but the animation occurs from both sides simultaneously. Ideally, the inner content should align with the right side of the first column without affecting the layout of the middle column.
$(document).ready(function() {
$(".two").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
//Show before animation!
$(".one").stop().animate({width:"197px"}, 170);
$(".one div").stop().animate({width:"137px"}, 310, function(){
});
$(this).removeClass("isDown");
} else {
//Hide after animation!
$(".one").stop().animate({width:"10px"}, 310);
$(".one div").stop().animate({width:"5px"}, 310, function(){
});
$(this).addClass("isDown");
}
return false;
});
});
Although I can successfully animate the column without content by reducing its width, the provided code attempts to achieve the same effect with content inside, resulting in issues. I wish to simply set the marginLeft of the first column to -185px to drag the middle section along with it, but this approach seems ineffective due to the css table layout.