Design System
  • Get started
    • Figma
    • Web
    • iOS
    • Android
  • Design tokens
    • Primitive colors
    • Semantic colors
      • Background Colors
      • On Background Colors
      • Foreground Colors
      • Border Colors
      • Focus Colors
      • Link Colors
    • Migration in iOS
    • Migration in android
    • Migration in web
    • Migration in figma
      • Step 1 Theme Migration
      • Step 2 Library Migration
      • Step 3 Journey Migration
    • Value & cost of migration
    • Deprecated tokens
  • Theme
    • Global branding
    • Component styling
    • Illustration theming
    • Exporting guide
    • Apply a theme on android
    • Apply a theme on iOS
    • Apply a theme on web
    • Multi theming on android
    • Multi theming on iOS
    • Multi theming on web
    • Before 2024 09
      • Create A Theme
      • Apply A Theme On Android
      • Apply A Theme On iOS
      • Apply A Theme On Web
      • Multi Theming On Android
      • Multi Theming On iOS
      • Multi Theming On Web
  • Accessibility
    • Overview
    • Designer checklist
    • Developer checklist
  • Guides
    • Custom icons on web
    • Beta ui ang with cursor
  • Web components
    • Account number
    • Account selector
    • Alert
    • Amount
    • Animations
      • Cross Journey
      • In Journey
      • Expand Reveal
      • Scroll Service
    • Avatar
    • Badges
      • Badge
      • Badge Counter
    • Button
    • Card vendor
    • Chip
    • Collapsibles
      • Collapsible
      • Collapsible Card
      • Collapsible Accordion
    • Money protection
      • Status
      • Disclaimer
      • Banner
    • Dropdowns
      • Dropdown Menu
      • Dropdown Single Select
      • Dropdown Multi Select
      • Dropdown Panel
    • Ellipsis
    • File attachment
    • Forms
      • Amount Input
      • Input Checkbox
      • Checkbox Group
      • Currency Input
      • Input Datepicker
      • Input Email
      • Fieldset
      • Input Inline Edit
      • List Multiple Select
      • Input Phone
      • Input Password
      • Input Radio Group
      • Input Range
      • Switch
      • Select List
      • Input Timepicker
      • Input Text
      • Textarea
      • Input Validation
      • Input File
      • Input Number
    • Icon
    • Illustration
    • Infinite scroll
    • Item log
    • Layouts and navigation
      • Horizontal Layout
      • Vertical Layout
    • Keyboard click directive
    • Loaders
      • Loading Indicator
      • Load Button
    • Locale selector
    • Logo
    • Modal
    • Mode header
    • Notification
    • Option list
    • Pagination
    • Page header
    • Payment card
    • Period selector
    • Product items
      • Basic Account
      • Savings Account
      • Current Account
      • Investment Account
      • Credit Card
      • Debit Card
      • Loan
      • Term Deposit
    • Product selector
    • Progress tracker
    • Progressbar
    • Rich text editor
    • Search box
    • States
      • Action Status
      • Empty State
      • Common Error State
    • Stepper
    • Css utilities
      • Bb Block
      • Bb Button Bar
      • Bb Card
      • Bb Container
      • Bb Display
      • Bb Inline Stack
      • Bb Layout Horizontal Navigation
      • Bb Layout Horizontal
      • Bb Layout
      • Bb Stack
      • Bb State Container
      • Bb Tabs Container
      • Bb Toolbar
      • Bb Vertical Tabs Container
    • Tab
    • Table
    • Tooltip
    • Tracker
    • Value diff
    • Universal header
  • Web formatters
    • Account number
    • Date
    • IBAN
    • Payment card number
    • Phone number
  • Mobile components
    • Alert
    • Amount
    • Async emblem
    • Avatar
    • Badge
    • Badge counter
    • Button
    • Button group
    • Card
    • Chip
    • Emblem
    • Floating action button
    • Forms
      • Address Form
      • Address Preview
      • Country Selector
      • Amount Input
      • Checkbox
      • Datepicker
      • Form Label
      • Phone Input
      • Password Input
      • Switch
      • Text Area
      • Text Input
    • Icon
    • Loading indicator
    • Link
    • Logo view
    • Navigation controller
    • Page control
    • Payment card
    • Product number display formatter
    • Progress bar
    • Separator
    • Search bar
    • Shimmer view
    • Slider
    • Snackbar
    • State view
    • Summary stack
    • Tab header
    • Toggle button

Collapsibles

An Accordion is a simple way of showing, hiding and breaking down content. It can be expanded or collapsed, which helps you read or find information, as well as reduce page length.

Accordion example

Anatomy of an Accordion

Anatomy of an accordion

  1. Header Area
    This is the top area of the accordion, this is where the title and Panel Toggle sit. This area is always visible. This area complete can be clickable to expand and collapse the Panel.

  2. Panel Title
    A Heading that tells the user what the content in the panel is about. It can contain any type of text and icons.

  3. Accordion Panel Toggle (optional)
    An icon or button can be used to provide a specific point in the screen for the user to collapse or expand the panel.

  4. Panel Area
    The collapsable container where other components are placed and information is displayed.

General Guidelines

Follow these guidelines for the most suitable and consistent experience:

  • An Accordion must always expand information below the title.

  • The title or toggle must clearly show there’s an interaction available to the user to expand or collapse.

  • If you are using arrows for toggle, they must face the way the content will expand (when in the default state) or collapse (when in it’s expanded).

  • An Accordion must always have the same width.

  • The title and content needs to feel part of the same thing. Use of subtle colour, shadows or lines can help distinguish between them if needed.

Modifiers

Panels within an Accordion have three different states; collapsed, hover and expanded.

Collapsed state

When the Accordion is collapsed, the Title, Header or Toggle should clearly show that the panel can be expanded. When using an arrow, this should be pointing down, showing the direction where content will expand.

Hover state

On web, when a user hovers over an Accordion panel, the element used to show the possibility to expand, are displayed in their native hover state.

Expanded state

When the Panel has been expanded, the content is displayed.

Dos & Don’ts

When working with Accordion, follow these recommendations to keep a consistent experience.

On this page
Anatomy of An Accordion
General Guidelines
Modifiers
Dos & Don’ts
©2025 All rights reserved
Terms and LegalPrivacy Policy

Cookies on Backbase

This website uses cookies to enhance your browsing experience, analyze the traffic, and for marketing purposes. All Google Analytics cookies are anonymized. By clicking 'Accept' you accept the use of all cookies as described in our privacy-statement.