Accordion
The accordion component is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
Specify an id attribute on each accordion's item body to associate it with its header automatically. This is required for accessibility.
Basic usage
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque consectetur consequatur debitis dolorum, eos eveniet in iste magnam, nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque consectetur consequatur debitis dolorum, eos eveniet in iste magnam, nihil.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda atque consectetur consequatur debitis dolorum, eos eveniet in iste magnam, nihil.
<bl-accordion>
<bl-accordion-item>
<bl-accordion-header>Accordion item 1</bl-accordion-header>
<bl-accordion-body id="panel-1">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda atque consectetur consequatur debitis dolorum, eos
eveniet in iste magnam, nihil.
</div>
</bl-accordion-body>
</bl-accordion-item>
<bl-accordion-item>
<bl-accordion-header>Accordion item 2</bl-accordion-header>
<bl-accordion-body id="panel-2">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda atque consectetur consequatur debitis dolorum, eos
eveniet in iste magnam, nihil.
</div>
</bl-accordion-body>
</bl-accordion-item>
<bl-accordion-item>
<bl-accordion-header>Accordion item 3</bl-accordion-header>
<bl-accordion-body id="panel-3">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda atque consectetur consequatur debitis dolorum, eos
eveniet in iste magnam, nihil.
</div>
</bl-accordion-body>
</bl-accordion-item>
</bl-accordion>