AMP: Building Accelerated Mobile Pages

Improving the accordion with an expanded state indicator

An interesting thing to note is that if any section of an accordion is expanded, AMP will apply the attribute expanded to that section. We can use this to improve the UX of the accordion. Now we can target an accordion section in CSS based on its expanded state, like this:

• Expanded: amp-accordion section[expanded] {...}
• Collapsed: amp-accordion section:not([expanded]) {...} (or simply amp-accordion section {...} if we add the expanded styles after the collapsed styles)

So, we could add rudimentary expanded/collapsed indicators with CSS pseudo elements like this:

amp-accordion section[expanded] h3::before {  content: '+';}amp-accordion section:not([expanded]) h3::before { content: '-'; ...