It does work in IE9+ and FF8+ but this demo is missing the –moz, –o, and –ms flavors for the transition css3 attribute.

It would be nice if Paul updated his CSS across the site to include the browser-specific implementations of these CSS3 attributes. Better yet, the browser makers should stop using these extensions and just use the actual attribute, TRANSITION.

i did a change to avoid scroll bars

.accordion h3 + div {
height: 0;
overflow: hidden;
–webkit-transition: height 0.3s ease-in;
}

.accordion .section:target div {
height: 100%;
position: relative;
float: left;
width: 100%;
padding-bottom: 10px;
}

Animation would work on IE, Firefox, and Opera if you add the following lines under –webkit-transition attrib.:

–o-transition: height 0.3s ease-in;
–moz-transition: height 0.3s ease-in;
–ms-transition: height 0.3s ease-in;

Nick

IE<9 needs conditional stylesheet.

Integrate also :hover and :focus?

B
http://www.kcl.ac.uk/ip/brentcunningham

I have tried using it on my site and it does work great, but I would like to switch the Heading 1 text with an image. As image is inserted into the place of text trough tags, the area remains clickable, but doesn’t expand any longer. I tried playing around with it, but I sadly can’t come up with any kind of solution.

Could you please offer me your insight on the matter how to make it work.

Thank you and thanks again for posting!