ns-ui

An accordion whose sections latch shut with a small SVG hasp-and-staple on each closed header — opening swings the hasp off its staple, lifts the lid 2px, then unfolds the content; closing reverses and the hasp settles back down with a bounce.

Use when collapsible sections whose closed state should look mechanically shut, a hasp hooked over a staple that swings off before the lid lifts, for FAQ blocks and settings groups a user opens deliberately one at a time; it is the wrong choice for content that folds itself as it arrives (timeline-reasoning-rail streams agent steps and collapses completed ones on its own) and for expanding a single clamped block of prose in place (truncation-word-count).

• Sections

• accordion
• disclosure
• hasp
• latch
• aria-expanded
• roving-tabindex
• svg