Highlight Active Accordion
An accordion that tints the background of the open item. The highlighted row keeps your place in long FAQ lists and dense product documentation.
An accordion that tints the background of the open item. The highlighted row keeps your place in long FAQ lists and dense product documentation.
Search blocks by description or jump to a page.
Highlight Active Accordion is a single-open accordion list. Each item sits in a lightly rounded row with a bottom border. When a row opens, its background shifts to a subtle tint so the active panel stands out from the rest of the stack. The question text also gains weight and a short underline animates in beneath it, giving two simultaneous cues that confirm the open state. The answer appears in the padded content area below.
All three items are independent. You can add or remove rows freely, and the question and answer copy in each item can be replaced with your own content without touching the layout or the highlight behavior.
Reach for this block when readers need to scan a list and track which item they are currently reading. On a project management workspace, for instance, a help or onboarding section often has a dozen questions and users scroll back to find the one they opened. The tinted row stays visible even after scrolling so there is no confusion about which answer is in view. It works better than a plain divider accordion when the list is long enough that keeping your place matters.
A natural flow around it on a Components page:
Before
After
Each item in the list is fully editable. Swap in your own questions and answers, adjust the number of rows, and the highlight and underline transitions carry through automatically.
Tip: keep question text short enough to fit one line in the trigger row so the underline animation reads cleanly without wrapping.