Accordion

The accordion component lets users show and hide sections of related content on a page.

Creating a simple accordion

Each accordion section requires heading_text to be set. The content is built from any markup that is passed in via the block.

Sections can be automatically expanded by setting expanded: true.

Input

= govuk_accordion do |accordion|
  - accordion.with_section(heading_text: "One") { tag.p("One content") }

  - accordion.with_section(heading_text: "Two") { tag.p("Two content") }

  - accordion.with_section(heading_text: "Three", expanded: true) { tag.p("Three content") }

<%= govuk_accordion do |accordion|
accordion.with_section(heading_text: "One") { tag.p("One content") }

accordion.with_section(heading_text: "Two") { tag.p("Two content") }

accordion.with_section(heading_text: "Three", expanded: true) { tag.p("Three content") }
end %>

Output

One

One content

Two

Two content

Three

Three content

<div class="govuk-accordion" data-module="govuk-accordion">
  <div id="one-section" class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span id="one" class="govuk-accordion__section-button" aria-expanded="false" aria-controls="one-content">
          One
        </span>
      </h2>
    </div>
    <div id="one-content" class="govuk-accordion__section-content">
      <p>
        One content
      </p>
    </div>
  </div>
  <div id="two-section" class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span id="two" class="govuk-accordion__section-button" aria-expanded="false" aria-controls="two-content">
          Two
        </span>
      </h2>
    </div>
    <div id="two-content" class="govuk-accordion__section-content">
      <p>
        Two content
      </p>
    </div>
  </div>
  <div id="three-section" class="govuk-accordion__section govuk-accordion__section--expanded">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span id="three" class="govuk-accordion__section-button" aria-expanded="true" aria-controls="three-content">
          Three
        </span>
      </h2>
    </div>
    <div id="three-content" class="govuk-accordion__section-content">
      <p>
        Three content
      </p>
    </div>
  </div>
</div>

Creating an accordion with section summaries

If the section needs more of an explanation, you can optionally add a summary line using the summary_text keyword.

Keep summary lines as short as possible.

Input

= govuk_accordion do |accordion|
  - accordion.with_section(heading_text: "First",
                      summary_text: "First summary") { tag.p("First content") }

  - accordion.with_section(heading_text: "Second",
                      summary_text: "Second summary") { tag.p("Second content") }

<%= govuk_accordion do |accordion|
accordion.with_section(heading_text: "First", summary_text: "First summary") { tag.p("First content") }

accordion.with_section(heading_text: "Second", summary_text: "Second summary") { tag.p("Second content") }
end %>

Output

First

First summary

First content

Second

Second summary

Second content

<div class="govuk-accordion" data-module="govuk-accordion">
  <div id="first-section" class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span id="first" class="govuk-accordion__section-button" aria-expanded="false" aria-controls="first-content">
          First
        </span>
      </h2>
      <div id="first-summary" class="govuk-accordion__section-summary govuk-body">
        First summary
      </div>
    </div>
    <div id="first-content" class="govuk-accordion__section-content">
      <p>
        First content
      </p>
    </div>
  </div>
  <div id="second-section" class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span id="second" class="govuk-accordion__section-button" aria-expanded="false" aria-controls="second-content">
          Second
        </span>
      </h2>
      <div id="second-summary" class="govuk-accordion__section-summary govuk-body">
        Second summary
      </div>
    </div>
    <div id="second-content" class="govuk-accordion__section-content">
      <p>
        Second content
      </p>
    </div>
  </div>
</div>