GOV
Accordions
Accordions can be used to show headings but hide content by default until a heading is clicked on.
Use accordions when you have a lot of content and most users will only want to see a subset of it. Avoid accordions if most users will want to see all of the information at once.
Options include:
- Heading level (h2, h3, etc), which should be based on the rest of the page's content.
- Whether the first item is open by default.
- Whether more than one item can be viewed at the same time.
Based on jQuery Accessible Accordion System, using ARIA.
Example
Sample Heading One
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sample Heading Two
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sample Heading Three
Aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Code
<div class="js-accordion-test" data-accordion-prefix-classes="accordion" data-accordion-all-opened=false> <a href="#openAll" class="js-accordion__expand-all"> Expand all </a> <div class="js-accordion__panel" data-accordion-opened="true"> <h2 class="js-accordion__header"> First Item </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="js-accordion__panel" data-accordion-opened="false"> <h2 class="js-accordion__header"> Second Item </h2> <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="js-accordion__panel" data-accordion-opened="false"> <h2 class="js-accordion__header"> Third Item </h2> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div>
<script>
$(function () {
$('.js-accordion-test').accordion({
buttonsGeneratedContent: 'html',
multiselectable: false
});
});
</script>Includes
// Load accordion registered resources
server.commonSpot.udf.resources.loadResources("accordion");
