Getting squish to work on IE inside accordion which is inside a table

Question

Greetings all. I'm having trouble getting Squish to work
inside an accordion, on IE only. Everything works fine in Firefox.
Now, technically, this isn't a Spry problem; it's a problem with
the lame HTML I'm currently stuck with. See, everything works fine
when isolated in its own page. But when I drop the stuff into our
existing HTML, on IE the squish stops working. What happens is that
the div the squish is to open simply doesn't open up. it stays
hidden.
I've narrowed it down to this: it stops working when I put
the accordion divs inside a table cell. Yes, I'm stuck with using
tables for layout at this point and I can't change that. So the
question is, Is there a way I can get the squish to work in IE with
the accordion divs inside a table cell?
Here's the code:
<TABLE CLASS="bodyTable" cellpadding="0" cellspacing="0"
width="820">
<TR>
<TD CLASS="middleCol" align="left" width="100%"
id="middleCol">
<div class="library_Accordion" id="library">
<div
id="library_AccordionPanel_1"class="library_AccordionPanel">
<div
id="library_AccordionPanelTab_1"class="library_AccordionPanelTab"
onclick="accordionSetSelectedTabCookie('_accordion_library',0)"><h3>Search
Library</h3></div>
<div id="library_AccordionPanelContent_1"
class="library_AccordionPanelContent">
<div>
jjjj
</div>
</div>
</div>
<div
id="library_AccordionPanel_2"class="library_AccordionPanel">
<div
id="library_AccordionPanelTab_2"class="library_AccordionPanelTab"
onclick="accordionSetSelectedTabCookie('_accordion_library',1)"><h3>Add
Custom PDF</h3></div>
<div id="library_AccordionPanelContent_2"
class="library_AccordionPanelContent">
fff
<input type="checkbox" name="AddToLibrary" value="1"
onclick="effect.start();resizePanel()">Add upload to Library?
<div>
<div id="AddToLibraryDiv" align="left"
style="visibility:hidden;display:none">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
</div>
<script type="text/javascript">
var effect = new Spry.Effect.Squish("AddToLibraryDiv",{from:
"0%", to: "100%", duration: 100, toggle: true, fps: 90,
scaleContent: false});
function resizePanel(){
document.getElementById('library_AccordionPanelContent_2').style.height="auto";
document.getElementById('library_AccordionPanelContent_2').style.display="block";
document.getElementById('library_AccordionPanelContent_2').style.visibility="visible";
</script>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var library = new
Spry.Widget.Accordion("library",{enableAnimation:true,steps:10,duration:200,defaultPanel: 0,useFixedPanelHeights:false});
</script>
</TD>
</TR>
</TABLE>
Thanks to all for any advice!
Marc E.

Answer 1

now this is interesting: it appears that the problem is in
the construction of the effect widget. if I do this:
<input type="checkbox"
onclick="startIt();resizePanel();">check me
<script>
function startIt(){
new Spry.Effect.Squish("AddToLibraryDiv",{from: "0%", to:
"100%", duration: 200, toggle: true, fps: 90, scaleContent:
false}).start();
function resizePanel(){
document.getElementById('library_AccordionPanelContent_2').style.height="auto";
document.getElementById('library_AccordionPanelContent_2').style.display="block";
document.getElementById('library_AccordionPanelContent_2').style.visibility="visible";
</script>
Then the div will show up. now, the behavior is wrong in that
it never disappears because of the way i'm doing it. still, this at
least leads me to believe that showing/hiding the div inside of an
accordion inside of a table cell is possible. So I can't use the
constructor in the normal manner... question is, is there a way to
do it otherwise?
thanks all!