Pure CSS Accordion Challenge

http://scripty.walterdavisstudio.com/pure-css-accordion.html

That’s the starting point. Note that I’ve changed the disclose method to setting max-height, rather than my previous method which just snapped display back and forth from none to block. Also note that I have set the “open” state to a fixed max-height of 800px.

That’s my problem.

I did this so that the effect could be animated smoothly with CSS3 transforms. It does work. But it’s not ideal, because it doesn’t work for really long copy, should that be required. If you have more than 800px vertical amount of copy inside a single accordion segment, it will be clipped off.

I tried transitioning display, and that didn’t work. I tried transitioning to a percentage height (which the spec claims will work, but doesn’t work vertically because of the insane way that CSS treats vertical measurement). Here’s a list of all that is supposed to work in an animation: http://www.w3.org/TR/css3-transitions/#properties-from-css-

Can anyone spot a better way to do this?

Thanks in advance,

Walter


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

UPDATE: I changed the original back to what it used to be, just for reference. The new starting point is here:

http://scripty.walterdavisstudio.com/pure-css-accordion-challenge.html

Walter

On Oct 14, 2012, at 11:53 AM, Walter Lee Davis wrote:

http://scripty.walterdavisstudio.com/pure-css-accordion.html

That’s the starting point. Note that I’ve changed the disclose method to setting max-height, rather than my previous method which just snapped display back and forth from none to block. Also note that I have set the “open” state to a fixed max-height of 800px.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter Lee Davis, Sun, 14 Oct 2012 11:59:09 -0400:

UPDATE: I changed the original back to what it used to be, just for
reference. The new starting point is here:

Pure CSS Accordion

Cool. Impressing.

leif h silli


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Any ideas how I could avoid the trap I’ve made for myself here? There doesn’t seem to be a way to animate the transition without using a fixed max-height dimension (in pixels) as the “open” setting.

Thanks,

Walter

On Oct 14, 2012, at 12:05 PM, Leif H Silli wrote:

Walter Lee Davis, Sun, 14 Oct 2012 11:59:09 -0400:

UPDATE: I changed the original back to what it used to be, just for
reference. The new starting point is here:

Pure CSS Accordion

Cool. Impressing.

leif h silli


dynamo mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter Lee Davis, Sun, 14 Oct 2012 13:58:53 -0400:

Any ideas how I could avoid the trap I’ve made for myself here? There
doesn’t seem to be a way to animate the transition without using a
fixed max-height dimension (in pixels) as the “open” setting.

Thanks,

Walter

On Oct 14, 2012, at 12:05 PM, Leif H Silli wrote:

Walter Lee Davis, Sun, 14 Oct 2012 11:59:09 -0400:

UPDATE: I changed the original back to what it used to be, just for
reference. The new starting point is here:

Pure CSS Accordion

Cool. Impressing.

If you as asking me, then I would loved to look at this. Unfortunately
I’m bogged down at moment …

leif h silli


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt,

The new, animated version is very attractive. Can this accordion still be activated with mouse-over as well as click?


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not the way this is currently coded, but it’s actually simpler to do something like it with rollover if that’s what you need. It’s not possible to make it “stick” if you mouse out of it, and it’s not possible to have more than one open at a time with a rollover. Both of those are possible with a JavaScript accordion.

Walter

On Oct 14, 2012, at 3:47 PM, Nik Andrew wrote:

Walt,

The new, animated version is very attractive. Can this accordion still be activated with mouse-over as well as click?


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey Walter,

http://cssway.thebigerns.com/workbench/walter_css_accordion/

I’ve only just seen this thread so I’m not sure I’ve understood the
problem. Let me know if this isn’t it and I’ll re-apply myself.


Ernie Simpson


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you go back to my example, you’ll see that the transition happens gradually in a modern browser. Your example “snaps” open, just as the original (using display:block and display:none) did, and does not engage the animation engine to ease the transition. Oh, and to add multiple paragraphs after the header, you would need to wrap them in another tag, maybe section or article, or div if you’re in HTML < 5.

Walter

On Oct 14, 2012, at 5:51 PM, Ernie Simpson wrote:

Hey Walter,

http://cssway.thebigerns.com/workbench/walter_css_accordion/

I’ve only just seen this thread so I’m not sure I’ve understood the
problem. Let me know if this isn’t it and I’ll re-apply myself.


Ernie Simpson


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, my mistake… thought the issue was just about accommodating space not
animation speed. Since that is calculated considering length, then varying
lengths will screw with it, always.

Best,

Ernie Simpson

On Mon, Oct 15, 2012 at 11:16 AM, Walter Lee Davis email@hiddenwrote:

If you go back to my example, you’ll see that the transition happens
gradually in a modern browser. Your example “snaps” open, just as the
original (using display:block and display:none) did, and does not engage
the animation engine to ease the transition. Oh, and to add multiple
paragraphs after the header, you would need to wrap them in another tag,
maybe section or article, or div if you’re in HTML < 5.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It seems like all authors faced with this problem: simple content accordion using only CSS3, there is no solution to avoid using fixed width. Let me know, if find one! I will get email with replies.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The demos in this article didn’t work in Safari at all. I’m pretty surprised – this is a basic CSS trick and it should work in everything down to IE6.

The issue with fixed width wasn’t apparent, fixed height was. But this is only a serious problem if you wanted to have nice open-close animations. The reason is that the CSS animate behaviors can only change from one fixed dimension to another, so you can’t animate between height 0 and height auto. It would be nice, but the CSS layout engines don’t work that way. JavaScript animations work this out by measuring the height of the element while it is open and “memoizing” that value to use later in their calculations. CSS “lazy-evaluates” the height of an automatic or unbound element, which has additional benefits in other areas, but screws things in this context.

If you look at my original example, where I use show/hide rather than height animations to make the switch between accordion segments, you will see that height is set to auto (actually not set at all) and the element just pops into view. Pure CSS Accordion

There’s no issue with height (or width, if you made this a horizontal layout) because there’s no need to use the dimension at all (you’re toggling display, not dimensions). Just to prove this point, I just edited that page to make it flex-width (outer box changed from width of 900px to width of 80%). You’ll see that the accordion elements are flexible throughout.

Walter

On Aug 24, 2014, at 5:37 AM, ramirrare wrote:

It seems like all authors faced with this problem: simple content accordion using only CSS3, there is no solution to avoid using fixed width. Let me know, if find one! I will get email with replies.


dynamo mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I know, how to make it work in Safari! Add the following code:

body { -webkit-animation: bugfix infinite 2s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Which “it” does this make work? I’m curious now, I’ve never seen this approach before. What does infinite mean in this context?

Walter

On Aug 25, 2014, at 4:16 AM, ramirrare wrote:

I know, how to make it work in Safari! Add the following code:

body { -webkit-animation: bugfix infinite 2s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am not sure, because I found in on Internet, but it probably updates some layers, it’s something like hasLayer property in IE.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options