How to make AMP accordion expanded and collapsed smoothly

Question

I do not find, there is any option or event to make the feel of accordion as my expectation in AMP's accordion library. However, I have done many changes using jquery but now I need to expand and collapse item smoothly. Is there any way to do this.

Answer 1

You can try using amp-selector and add CSS animations to achieve the same effect.

You can use this trick to animate from heigh 0 to auto. How can I transition height: 0; to height: auto; using CSS?

Answer 2

You may find this thread helpful to solve your issue. It stated that:

• Currently there is no animation for the expand/collapse action. This means that it may be difficult for the user to track the behavior of the interface if multiple items are collapsing at the same time that their target element is expanding.
• There is no scrolling adjustment when amp-accordion closes or opens, which means if a large enough (or large enough set of) amp-accordion(s) closes above the current viewport, the content inside the viewport could shift dramatically (even entirely out of view)
• Needs some way for multiple amp-accordion elements to communicate with each other (could be a parent element with an attribute something like "auto-collapse-children")

Also, check this Content Collapse jQuery plugin to smoothly collapse and expand content by clicking the panel header, which acts as an accordion.