Accordion

Introduction

Accordions present content in vertically stacked sections that expand and collapse from user's input. An accordion's content hierarchy should be flat, so avoid nesting accordions. Accordion's sections can be fully collapsed or first section expanded, depending on if the accordion is the part of larger content (e.g. various technical details at end of product description) or if accordion contains all content for the current view. An accordion section title should clearly inform user what will be behind it and the bracket should rotate to point to the direction the section will transform to when clicked.

Accordion item title will be h3 (default) or h4 html title based on selection.