Problem with horizontal slide in an absolute DIV
I recently reconfigured an accordion script (originally located
here) to be set up to where 2 buttons make the content slide out horizontally and the third opens an empty slide (to give the appearance of closing the other two slides).
In my original tests, it all worked smoothly. However, when I placed the script in the site, I realized that, since the script was located in a div (called #property) with absolute positioning, the slider wouldn't open. Here's an example:
http://www.planetbobstudios.com/test/test.html
However, if I gave #property a fixed width (like 800px), then it would open, but the #property div would always cover the content beneath it. Here's an example:
http://www.planetbobstudios.com/test/test2.html
I thought of animating the property div, so that it would stretch from 175px to 800px at the same time that I clicked the button for the slider to come out. Something like this:
- $("#value_toggle").click(function(){
- $("#property").animate( { width:"800px" }, { queue:false, duration:0 } ).delay(1500);
- $('#testHandle1').click();
- });
In theory, this should work. But it looks as though the slide continues to the see the #property div as being 175px even if the animation stretches it to 800px. How do I make it so that either A) the slider will slide out over the text with the wrapping absolute div remaining at 175px or B) the enclosing #property div only stretches to 800px wide during the times the slides are visible?