Hey, so there might be a simple solution to my problem, but here is my question:
I have a box: ====html==== <div id="box"> <div id="innerbox"> <a href="" id="toggle"></a> There is some text inside this box. It spans the entire width blah blah blah. </div> </div> ====styles=== #box{ width:800px; height:400px; border:1px solid #444; } #innerbox{ position:relative; width:200px; float:right; } #toggle{ width:20px; background-color:grey; height:400px; float:left; } ==== Now this innerbox needs to move to the side to reveal whatever is below it when the toggle is clicked. As the the innerbox moves out of the main box the parts of it that leave main box should become invisible. Now there is a simple solution in which I make the background of the innerbox an image and decrease the width using jQuery's .animate(). This isn't ideal however, since I kinda need there to be text users can interact with in the innerbox. ====javascript==== $(document).ready(function(){ $("#toggle").toggle(function(){ $("#innerbox").animate({ width: '75px' }, 'slow'); },function(){ $("#innerbox").animate({ width: '200px' }, 'slow'); }); }); ====== On the other hand, shifting the innerbox to the right (instead of decreasing the width of the image) means that it extends the reach of the encompassing box. ====javascript==== $(document).ready(function(){ $("#toggle").toggle(function(){ $("#innerbox").animate({ right: "-=125" }, 'slow'); },function(){ $("#innerbox").animate({ right: '-=125' }, 'slow'); }); }); ==== Does anyone have any ideas how I can solve this? I've thought of placing divs with a higher z-index next the main box but this isn't really an option, since it would make the website too large. Any help would be much appreciated. Thanks, Simon