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

Reply via email to