I'm using Adobe Dreamweaver CS5 to revamp a site.
I am using Dreamweaver's built-in Spry Collapsible Panel widget to shorten the length of a bio page by having additional paragraphs about board members extend out when 'more' is clicked, and close when it is clicked again.
Here's the resulting html when you insert an instance of a Collapsible Panel into your code in DW; the div with the class of CollapsiblePanelTab is the clickable 'more' area, and the div of class CollapsiblePanelContent is the panel area that expands:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab (more)</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
Our graphic designer is insisting on the 'more' tab to slide down to rest at the bottom of the panel once fully expanded.
However, the default behaviour is for more to remain stationary at top with the panel expanding beneath it.
To achieve this I absolutely positioned the CollapsiblePanelTab div, giving it a left:0; bottom:0 position (this also meant I had to make the containing div of CollapsiblePanel relatively positioned).
This works great in every browser expect the current IE release, IE8. In IE8, after closing the panel, the more tab (CollapsiblePanelTab div) momentarily moves approx 16px up and flicks back down again.
I can't work out why (obviously), but think it might have to do with the focus/blur event detection of the javascript (beyond me at this stage of my JS learning).
You can view the bug at work here:http://www.wakerleybrothers.co.nz/problem/ (view it in IE8).
The javascript file is here: /problem/scripts/SpryCollapsiblePanel.js (unaltered from DW's default)
The CSS file is here: /problem/css/SpryCollapsiblePanel.css (with just the few positioning changes to DW's default as described above)
Any thoughts/suggestions much appreciated - Thanks!