There is 1 variation of accordion.
Accordions are used to compress simple, contextual information. Tap to reveal information.
Accordion in a collapsed state. Text is MetLife Blue 2 (#007ABC). Underline is MetLife Darkest Gray (#333333).
On focus state field border becomes 3px in MetLife Blue 2 (#007ABC).
Plus symbol changes to minus symbol. Expanded content background should be MetLife Light Gray (#F2F2F2). When accordion is open, change color of border line to MetLife Blue 2 (#007ABC).
Accordions are used to compress simple information that doesn't include complex interactions. The plus symbol indicates the ability to expand/collapse extra information.
Accordions animate open or close upon a user tapping anywhere on title row/closed state of the component.
The content slides down from behind the closed state, as the vertical line of the + icon rotates to become a - minus icon. Upon close, both elements reverse to hide the accordion content.