Amphtml: [FR] amp-accordion animated expand/collapse

[AndrewKGuan]

Currently the amp-accordion doesn't have any transition between the expanded/collapsed states. End users' eyes will lose track on the items since they move too fast, especially in the implementation of a long menu.

This is crucial to main site menus on many types of sites, eCommerce, news publishers etc.

[jridgewell]

/to @camelburrito

[camelburrito]

cc @ericlindley-g

[camelburrito]

@AndrewKGuan - Thanks for taking time to file the feature requests! You can implement long menus with amp-selectors amp accordion was not designed to accommodate menus.

However i agree that animation may be useful for certain accordions. But if combined with FRs like this https://github.com/ampproject/amphtml/issues/11359 animation might not be great.

[AndrewKGuan]

Hey, thanks for the quick reply. Trying to implement a multi-level hamburger menu (something like the "Shop" menu on https://m.costco.com )would be would be hard with amp-selectors, wouldn't it? =)
And I guess if combined with the collapse-other features would not be in conflicts, simply animate the expanding (clicked) item but not the collapsing items, perhaps?
Please let me know if that makes sense to you, I appreciate it.

[camelburrito]

i have something very basic/crude - http://jsbin.com/falohu - But this is the idea behind using a selector to do dropdowns , it is not hard at all and you will have total control over the UI

[AndrewKGuan]

Can we get something close to the one on the very bottom of this page (in mobile mode):
https://www.us.kohler.com/us/
And if you click around the accordion on the bottom (the black background section), you'd notice the sliding and the collapsing other items happening at the same time.

[ericlindley-g]

Carrying over feedback that other developers are looking for this feature as well (/cc @cnabar)

[vamshi5889]

@AndrewKGuan Did you figure out a way to achieve this... auto collapsing the other items?

[AndrewKGuan]

Hi Krishna,
no I did not attempt a workaround. I filed this FR in hope to have an intuitive built-in functionality of the amp-accordion component.

[cathyxz]

So to clarify, we can auto collapse other sections with the attribute expand-single-section.

@AndrewKGuan Am I correct in understanding that this FR here is basically about animating the expansion / collapse?

If so (following up to @aghassemi 's comment re: contributing), you can start by looking at the toggle function in amp-accordion.js and the CSS for amp-accordion in amp.css here.

@ericlindley-g should this be attribute-gated behavior or is it "universal" enough to just have animation be a default? My guess is that we should allow users to define a duration at the very least (or provide custom logic based on the height).

[vamshi5889]

Well, we can use amp-selector to mimic the behavior of amp-accordion with auto collapsing.

@AndrewKGuan @cathyxz
You have to control the auto toggling from css (display --- show, hide) with selected attribute.

[camelburrito]

using amp-selector is the easiest way to achieve this.

[vamshi5889]

Yes @camelburrito

[ericlindley-g]

@cathyxz — if possible, it would be great if animation were baked into amp-accordion; I think that would make the user experience more seamless and clear (especially for large sections of expanded content, where animation is useful in conveying that information is being shown or hidden). Though @camelburrito , I seem to remember that there were performance concerns—is that a concern for amp-accordion?

[cathyxz]

@AndrewKGuan @vamshi5889 so to clarify, by "auto collapse", are we referring to only having one section open at a time, or referring to the separate FR, https://github.com/ampproject/amphtml/issues/2980? Feel free to +1 to #2980 and discuss it there. =)

About animating expand / collapse: yes, there are performance concerns about animating the height attribute, so it would not be a reasonable thing to make animation the default behavior of amp-accordion. What we can do, is gate it behind a new attribute for amp-accordion, like animate-toggle. The main gotcha with implementation is to check to see if we currently expose on toggle / on expand / on collapse events. If animated, these events would have to fire on animation end (we would need to do a JS animation, possibly with the <amp-animation> library). We should also vary the animation duration based on the actual height of the section we are expand / collapsing.

I'll rewrite this issue as a good first issue. =)

[vamshi5889]

Oh that's a good point @cathyxz . I'm with you for the new attribute. But,

There is another way to achieve it (Both auto height and multiple sections expand resolved) with plain HTML and CSS using <ul><li></li></ul> and input type checkboxes inside li.

I have faced this problem few months ago when i was implementing the collapsible menu's in one of my AMP projects.

And I implemented with the above approach. I bind the keys as id's to input fields and used label elements for each input. Infact, i made a property (for checkbox and radio) and bind it to input type attribute to make it configurable (enable/disable auto collapse).

And no amp components required for this. Hope this rings the bell.
@ericlindley-g @AndrewKGuan

Thanks,
Vamshi

[AndrewKGuan]

@cathyxz on this issue I'm only requesting smooth expanding/collapsing of the menus. Auto-collapse is already supported with 'expand-single-section'.

Frankly if animation is available to amp-selector, amp-carousel, and other things, I think it can be done for amp-accordion as well. The animation is only needed when the user taps the menu so any js to facilitate that can be deferred after the page is loaded. Or a flag can be provided to the publisher to skip the js/css completely if she's super conscious about performance or finds animation unnecessary.
But I think smooth toggling is a great UX to allow users' eyes to follow the item, especially when the menu is long. Not being able to do that is a deal breaker to many publishers.

[camelburrito]

@AndrewKGuan - Animation is inbuilt for carousel and is super complex and carousel does not need any height or width calc since we know the slide containers are as wide and tall as the carousel itself.

amp-selector is not a component with animations - it is kind of a tool that would let us do a variety of things like adding and removing classes, implementing your own checkboxes, making components behave as a checkbox/radio button etc.

You can add CSS animations that would animate based on when an option is selected by targeting the value attribute of the selector. Here you would be animating max-height to animate height, since height: auto cannot be animated.

@cathyxz - this is probably not a GFI :). This needs the component to display:block with opacity:0 and when a section is expanded and compute height and then animate the component from 0 to that height in JS. wrt to the attribute name just animate seems to be a good option - we probably need to set it to any value and

[AndrewKGuan]

Maybe my view is too simplistic, but it seems to me that the css solution can be built into the amp-accordion component. For the height that cannot be determined up front, can we use max-height and give it a reasonable height (ie. the height of the screen)? If the animation is too fast, or the max-height is too short, the user then can override the max-height by supplying an actual height in their css?

[vamshi5889]

I agree with you @camelburrito .This seems to be a better option.

[cathyxz]

/cc @spacedino

[cathyxz]

This should land in canary tomorrow, production next week, you can animate the expand / collapse using the animate attribute on the accordion. I will update documentation and ABE when the change lands in production.

[AndrewKGuan]

Thanks Cathy! This works great!

[vamshi5889]

This is a good add-in @cathyxz

[cathyxz]

Good to know. Enjoy!