Accordion
Example
Markup
<div role="tablist">
<div class="c-accordion js-accordion">
<a href="#c-accordion__documents" class="c-accordion__button c-accordion__button--toggle" role="tab" aria-selected="false" aria-expanded="false">
<span class="c-accordion__icon c-accordion__icon--closed icon icon-border-arrow_bottom" aria-hidden="true">
<span class="path"></span>
</span>
<span class="c-accordion__icon c-accordion__icon--opened icon icon-border-arrow_top" aria-hidden="true">
<span class="path"></span>
</span>
<h2 class="c-accordion__button-title">Documents for this proposal</h2>
</a>
<div id="c-accordion__documents" class="c-accordion__container" role="tabpanel" aria-hidden="true" style="display: none;">
<div class="c-accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<a class="c-accordion__button c-accordion__button--close" href="/" tabindex="-1">
<span class="c-accordion__icon icon icon-cross" aria-hidden="true"></span>
<span class="c-accordion__button-title">Close</span>
</a>
</div>
</div>
</div>
Provide page feedback
Please enter your comments below, or use our usual service contacts if a specific matter requires an answer.
Fields marked with an asterisk (*) are required.