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 FunctionsAccordion Javascript
Locale KeysNone

Accessibility

None at this time.

To Top of page