Accordion

Let users show and hide sections of related content on a page.

Related components: Details, Tabs

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

<GoAAccordion heading="Heading" headingSize="medium">
  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
</GoAAccordion>

heading

string

Sets the heading text.

secondaryTextstring

Sets secondary text.

openboolean

Sets the state of the accordion container open or closed. Defaults to false.

headingSizesmall | medium

Sets the heading size of the accordion container heading. Defaults to small.

headingContentReactNode

Add components to the accordion container heading such as badges.

maxWidthstring

Sets the maximum width of the accordion.

onChange(open: boolean) => void

Callback function when accordion heading is clicked.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Expand or collapse part of a form

Review your application

Date of referral: January 27, 2021
Work safety concerns: None
Type of referral: Word of mouth, internet search
Intake received from another site: Yes

Name: Joan Smith
Contact preference: Text message

dl.accordion-example {
  margin: 0 0;
}

.accordion-example dt {
  color: var(--goa-color-text-default);
  font: var(--goa-typography-heading-s);
  margin-bottom: var(--goa-space-xs);
}

.accordion-example dd {
  margin: 0 0 var(--goa-space-l);
  font: var(--goa-typography-body-m);
}

.accordion-example dd:last-of-type {
  margin-bottom: 0;
}

const headingContent = <GoABadge type="important" content="Updated" />;

<h3>Review your application</h3>

<GoAAccordion heading="Referral details" headingContent={headingContent}>
  <dl className="accordion-example">
    <dt>Date of referral</dt>
    <dd>January 27, 2021</dd>
    <dt>Work safety concerns</dt>
    <dd>None</dd>
    <dt>Type of referral</dt>
    <dd>Word of mouth, internet search</dd>
    <dt>Intake received from another site</dt>
    <dd>Yes</dd>
  </dl>
</GoAAccordion>

<GoAAccordion heading="Contact information">
  <dl className="accordion-example">
    <dt>Name</dt>
    <dd>Joan Smith</dd>
    <dt>Contact preference</dt>
    <dd>Text message</dd>
  </dl>
</GoAAccordion>

Hide and show many sections of information (FAQ)

Show all sections

To create an account you will need to contact your office admin.

You will need to verify your identity through our two factor authentication in addition to the digital signature.

Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.

Yes, our digital service is designed with accessibility in mind. More information on accessibility.

const [expandedAll, setExpandedAll] = useState<boolean>(false);
const [expandedList, setExpandedList] = useState<number[]>([]);
useEffect(() => {
  setExpandedAll(expandedList.length === 4);
}, [expandedList.length]);

const expandOrCollapseAll = () => {
    setExpandedAll((prev) => {
    const newState = !prev;
    setExpandedList(newState ? [1, 2, 3, 4] : []);
    return newState;
  });
};

const updateAccordion = (order: number, isOpen: boolean) => {
  setExpandedList((prev) => {
  if (isOpen) {
    return prev.includes(order) ? prev: [...prev, order];
  }
  return prev.filter((item) => item !== order);
});
}

<GoAButton type="tertiary" mb="m" onClick={() => expandOrCollapseAll()}>
   {expandedAll ? "Hide all sections" : "Show all sections"}
</GoAButton>

<GoAAccordion open={expandedList.includes(1)} heading="How do I create an account?" headingSize="medium" onChange={(open) => updateAccordion(1, open)}>
   To create an account you will need to contact your office admin.
</GoAAccordion>

<GoAAccordion open={expandedList.includes(2)} heading="What verification is needed to sign documents digitally?" headingSize="medium" onChange={(open) => updateAccordion(2, open)}>
   You will need to verify your identity through our two factor authentication in addition to the digital signature.
</GoAAccordion>

<GoAAccordion open={expandedList.includes(3)} heading="Can I track the status of my service requests online?" headingSize="medium" onChange={(open) => updateAccordion(3, open)}>
   Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.
</GoAAccordion>

<GoAAccordion open={expandedList.includes(4)} heading="Are there accessibility features for people with disabilities?" headingSize="medium" onChange={(open) => updateAccordion(4, open)}>
   Yes, our digital service is designed with accessibility in mind. <a href="">More information on accessibility.</a>
</GoAAccordion>

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Accordion

Component

Let users show and hide sections of related content on a page.

Component

Properties

Examples

Expand or collapse part of a form

Review your application

Hide and show many sections of information (FAQ)