Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Accordion

Accordion helps the user to choose from sections of different content, and can be used either to focus the user's task, and save space if there would too many options displayed.

Single

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
<input type="radio">

<div class="e-accordion">
  <input type="radio" name="accordion-radio" id="accordion-radio-0" checked>
  <label class="e-accordion__title" for="accordion-radio-0">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-1">
  <label class="e-accordion__title" for="accordion-radio-1">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-2" disabled>
  <label class="e-accordion__title" for="accordion-radio-2">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-3">
  <label class="e-accordion__title" for="accordion-radio-3">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>
<div class="e-accordion">
  <input type="radio" name="accordion-radio" id="accordion-radio-0" checked>
  <label class="e-accordion__title" for="accordion-radio-0">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-1">
  <label class="e-accordion__title" for="accordion-radio-1">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-2" disabled>
  <label class="e-accordion__title" for="accordion-radio-2">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="radio" name="accordion-radio" id="accordion-radio-3">
  <label class="e-accordion__title" for="accordion-radio-3">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>
JavaScript
Copy JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Multiple

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
<input type="checkbox">

<div class="e-accordion">
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-0" checked>
  <label class="e-accordion__title" for="accordion-checkbox-0">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-1">
  <label class="e-accordion__title" for="accordion-checkbox-1">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-2" disabled>
  <label class="e-accordion__title" for="accordion-checkbox-2">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-3">
  <label class="e-accordion__title" for="accordion-checkbox-3">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>
<div class="e-accordion">
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-0" checked>
  <label class="e-accordion__title" for="accordion-checkbox-0">
    Accordion 1
  </label>
  <div class="e-accordion__content">
    1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-1">
  <label class="e-accordion__title" for="accordion-checkbox-1">
    Accordion 2
  </label>
  <div class="e-accordion__content">
    2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-2" disabled>
  <label class="e-accordion__title" for="accordion-checkbox-2">
    Disabled
  </label>
  <div class="e-accordion__content">
    3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input type="checkbox" name="accordion-checkbox" id="accordion-checkbox-3">
  <label class="e-accordion__title" for="accordion-checkbox-3">
    Accordion 4
  </label>
  <div class="e-accordion__content">
    4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</div>
JavaScript
Copy JavaScript
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Variations

Stretched
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-accordion-stretch

<div class="e-accordion e-accordion-stretch">
  <input type="checkbox" name="accordion-stretch" id="accordion-stretch-0" checked>
  <label class="e-accordion__title" for="accordion-stretch-0">
    Opened Accordion
  </label>
  <div class="e-accordion__content">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input name="accordion-stretch" id="accordion-stretch-1" disabled>
  <label class="e-accordion__title" for="accordion-stretch-1">
    Disabled Accordion
  </label>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <input name="accordion-stretch" id="accordion-stretch-2">
  <label class="e-accordion__title" for="accordion-stretch-2">
    Closed Accordion
  </label>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>
<div class="e-accordion e-accordion-stretch">
  <input type="checkbox" name="accordion-stretch" id="accordion-stretch-0" checked>
  <label class="e-accordion__title" for="accordion-stretch-0">
    Opened Accordion
  </label>
  <div class="e-accordion__content">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <input name="accordion-stretch" id="accordion-stretch-1" disabled>
  <label class="e-accordion__title" for="accordion-stretch-1">
    Disabled Accordion
  </label>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <input name="accordion-stretch" id="accordion-stretch-2">
  <label class="e-accordion__title" for="accordion-stretch-2">
    Closed Accordion
  </label>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>
JavaScript
Copy JavaScript
Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
Disabled content
Closed accordion content

Without checkbox/radio
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-accordion__title-active, .e-accordion__title-disabled .e-accordion__content-active

<div class="e-accordion">
  <div class="e-accordion__title e-accordion__title-active">
    Opened Accordion
  </div>
  <div class="e-accordion__content e-accordion__content-active">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <div class="e-accordion__title e-accordion__title-disabled">
    Disabled Accordion
  </div>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <div class="e-accordion__title">
    Closed Accordion
  </div>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>
<div class="e-accordion">
  <div class="e-accordion__title e-accordion__title-active">
    Opened Accordion
  </div>
  <div class="e-accordion__content e-accordion__content-active">
    Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
  <div class="e-accordion__title e-accordion__title-disabled">
    Disabled Accordion
  </div>
  <div class="e-accordion__content">
    Disabled content
  </div>
  <div class="e-accordion__title">
    Closed Accordion
  </div>
  <div class="e-accordion__content">
    Closed accordion content
  </div>
</div>
JavaScript
Copy JavaScript
Opened Accordion
Opened accordion sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
Disabled Accordion
Disabled content
Closed Accordion
Closed accordion content

Service specific variations

Automation center sidemenu.e-accordion-sidebar

Form
Data Change
Send Email
Export Contacts
Send SMS

Related components

TabVertical tab

Accordion

Accordion helps the user to choose from sections of different content, and can be used either to focus the user's task, and save space if there would too many options displayed.

Structure

Accordion is a vertically stacked list of items that utilizes show/hide functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking.

Best practices

Accordions should:

  • Have clear titles, as it acts as in-place navigation showing the user the contents.
  • Use nouns as title names.
  • Contain similar content in each accordion panel.
  • Focus on one task in each panel.
  • Show default selection by opening up the most important or the first option. This also hints to the user how the compnent works.

Try to avoid:

  • Using overlapping titles, that confuses the user and keeps them from choosing the right one.
  • Using accordion as navigation with displaying dissimilar content in the accordion panels.

Content guidelines