blind toggle with negative margins - is this fixable or is there a better way?
This is probably best illustrated with an example, so:
http://www.bencasey.co.uk/jtoggle/
(Click the "Information Architecture" header to fire the effect)
The problem I have is this:
The light grey content box, with the dark grey header inside it,
should slide into and out of visibility - which it's doing.
However, also I need the blue background image on the header bar to
overlap the dark grey content header.
The way I've got this at the moment, I've simply used a negative
topmargin on the content box to move it up, and z-index on that and
the header bar to move it underneath. This does the job while
everything is static. But while the animation is... animating, the
effect is lost - the dark grey is no longer visible underneath the
blue header image.
I'm not really sure what's causing this, whether its root is a CSS or
JS issue. But I'd really appreciate any suggestions....
Cheers.