Accordions
Accordions
Hides or shows information based on user action.
Examples
Code
<h3>
<button type="button" class="accordionHeader displayFlex flexNoWrap flexAlignItemsCenter flexSpaceBetween text18 textSemiBold padding10 bkgdLtGray fullWidth darkestLink pointer" aria-expanded="false" aria-controls="SaleSection">
<span class="marginRight15">Accordion Header Text</span>
<svg class="arrowIcon" height="20px" width="20px" aria-hidden="true" focusable="false"><use xlink:href="#svgIcon-arrowSolid"></use></svg>
</button>
</h3>
<div id="SaleSection" class="accordionPanel" aria-hidden="true">
<div class="borderMdGray padding10">
<p>Here is some content in my accordion - Whoop! Whoop!</p>
</div>
</div>
Notes
Please feel free to change the color of your accordion header.
Resources
Sass File(s) | /sass/components/_accordion.scss |
---|---|
JS File(s) | /library/accordions2021.js |
JS Functions | Accordion Javascript |
Locale Keys | None |
Accessibility
None at this time.