<?xml version="1.0" encoding="utf-8"?>

Indicate section state

Indicate section state Bad Practice
Indicate section state Best Practice

Upon expanding an accordion section, a subtle yet distinct color or style change can effectively indicate its active state. The background or text color might shift to a different shade or a completely new color, distinguishing the expanded section from the others.

Additionally, stylistic alterations such as bolder text or more pronounced borders can draw attention to the active content. These visual cues should be both consistent across all sections and subtle enough to maintain the overall design integrity, ensuring an intuitive and clear navigation experience for users.

Improve your UX & Product skills with interactive courses that actually work