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: CSS Transitions
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.
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:
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:
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?
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.
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.
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.
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.