The LB Redbridge design system.

- Reusability
- User centred design
- An overview
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
- Case examples

Accordion

Accordion component with redbridge branding.
Allows users to show and hide sections of related content on a page.
GDS guidelines on using this component (opens in a new window)

Writing well for the web

This is the content for Writing well for the web.

Writing well for specialists

This is the content for Writing well for specialists.

Know your audience

This is the content for Know your audience.

How people read

This is the content for How people read.

HTML Code ↕

                    
                      <div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section ">
  <div class="govuk-accordion__section-header">
    <h2 class="govuk-accordion__section-heading">
      <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
        Writing well for the web
      </span>
    </h2>
  </div>
  <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
    <p class='govuk-body'>This is the content for Writing well for the web.</p>
  </div>
</div>
<div class="govuk-accordion__section ">
  <div class="govuk-accordion__section-header">
    <h2 class="govuk-accordion__section-heading">
      <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
        Writing well for specialists
      </span>
    </h2>
  </div>
  <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
    <p class='govuk-body'>This is the content for Writing well for specialists.</p>
  </div>
</div>
<div class="govuk-accordion__section ">
  <div class="govuk-accordion__section-header">
    <h2 class="govuk-accordion__section-heading">
      <span class="govuk-accordion__section-button" id="accordion-default-heading-3">
        Know your audience
      </span>
    </h2>
  </div>
  <div id="accordion-default-content-3" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-3">
    <p class='govuk-body'>This is the content for Know your audience.</p>
  </div>
</div>
<div class="govuk-accordion__section ">
  <div class="govuk-accordion__section-header">
    <h2 class="govuk-accordion__section-heading">
      <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
        How people read
      </span>
    </h2>
  </div>
  <div id="accordion-default-content-4" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-4">
    <p class='govuk-body'>This is the content for How people read.</p>
  </div>
</div>
</div>