Components

Accordion

The accordion lets users know that there is more content to be shown

We use AngularJS for this component and so you will need to include:

To use angularjs you can read their documentation 

Portal usage

We haven’t identified a use case for accordions on our portal development.

Example

Accordion title here

Accordion content to go here 

                                
                                <div class="sgc-accordion-container ng-scope" ng-controller="sgc-accordion-1" style="margin-bottom:0;">
<div class="accordion">
<div ng-click="accordion_component = !accordion_component " ng-class="{'accordion__heading accordion__collapsed': accordion_component, 'accordion__heading accordion__expand': !accordion_component}" class="accordion__heading accordion__expand">
<h4 class="accordion__title">Accordion title here <span class="pull-right fas fa-minus" ng-class="{'fas fa-plus': accordion_component, 'fas fa-minus': !accordion_component}"></span></h4>
</div>
<div class="accordion__panel" ng-hide="accordion_component">
<div class="accordion__panel__inner">
<p>Accordion content to go here </p>
</div>
</div>
</div>
<script>sgc.controller('sgc-accordion-1', function ($scope, $http) {$scope.accordion_component  = true});</script>
</div>

When to use this

Only use an accordion if there’s evidence it’s helpful for users to:

  • see an overview of multiple, related sections of content
  • show and hide those sections as needed

Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.

When not to use this

Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.

Test your content without an accordion first. Consider if it’s better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.

Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.

Back to top