Accordion

A vertical list of items, each of which can be expanded or collapsed to show more content.

Usage recommendations

Recommended	Not Recommended
Prioritize Optional Content: Use accordions for secondary or optional information that supports but isn't crucial to the main content.	Avoid Hiding Critical Info: Never use accordions for essential, must-see information.
Group Related Information: Keep content in each accordion section closely related to ensure user predictability.	Limit Nesting: Avoid multiple levels of nested accordions to prevent user confusion.
Include Section Summaries: For complex or lengthy content, offer short previews in the collapsed state to help users decide to expand.	Don't Overuse: If your page is filled with accordions, reconsider your content strategy to avoid clutter.

Twig Usage

{% include '@bolt-components-accordion/accordion.twig' with {
  content: 'This is a accordion component.'
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Accordion (accordion.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	All of the items in the accordion. Each item should contain a header and a content.	`any`	—	—
single	Allow only one section to open at a time.	`boolean`	`false`	—
no_separator	Hides the separator in between items.	`boolean`	`false`	—
box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	—
spacing	Controls the inset spacing of each item.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
icon_valign	Vertically align the accordion trigger content and trigger icon.	`string`	`center`	`top` or `center`
scroll_offset	Additional offset for smooth scrolling, integer converted to pixel value.	`integer`	—	—

Accordion Item (accordion-item.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Expandable content of an item.	`any`	—	—
trigger	Trigger content of an item.	`any`	`Toggle Accordion`	—
open	Automatically expand an item on page load.	`boolean`	`false`	—
inactive	Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden.	`boolean`	`false`	—

Install

npm install @bolt/components-accordion

Dependencies

@bolt/core

accordion-js

Basic Accordion

An accordion component embeds a responsive, interactive accordion on the page.

Demo

Light Theme

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dark Theme

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    content: 'Lorem ipsum dolor sit amet..',
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Single

By setting the single prop to true, it allows only one Accordion item to be opened at a time.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  single: true,
} only %}

HTML

Accordion No Separator

By setting the no_separator prop to true, it will remove the separator in between Accordion items.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  no_separator: true,
} only %}

HTML

Accordion Box Shadow

By setting the box_shadow prop to true, it will create a box shadow around the accordion.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  box_shadow: true,
} only %}

HTML

Accordion Spacing

By setting the spacing prop to none, xsmall, small, medium, or large, it applies the appropriate inset spacing for each accordion item. The default is medium.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  spacing: 'xlarge',
} only %}

HTML

Accordion Icon V-Align

By setting the icon_valign prop to top or center, it will vertically align the trigger and the icon accordingly. The default is center.

Demo

Accordion Item Content

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  icon_valign: 'top',
} only %}

HTML

Accordion Item Open

Set the open prop to true on any accordion item to display the content of that item on page load.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    open: true,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Item Inactive

Set the inactive prop to true on any accordion item to display the trigger as an inactive element. It will have the same font-styles as the other triggers but none of the interactive styles. It will not be clickable, and that item's content and toggle icon will always be hidden.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    inactive: true,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Item Deep Linking With Scroll Offset

Deep link to an accordion item by adding a query string to the URL with "selected-accordion-item" as the name and the item ID as the value. For example: ?selected-accordion-item=accordion-item-2. This link will open in a new tab in order to demonstrate the functionality.

Demo

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Accordion Item One',
    attributes: {
      id: 'accordion-item-3',
    }
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Item Deep Linking

Deep linking will auto-scroll to your selected accordion item. If there is a "fixed" element on the page, it may overlap your tabs. To fix this, add js-bolt-sticky class to the "fixed" element. That will offset the scroll position by the "fixed" element's height. Use scroll_offset for any additional adjstments. See a demo: ?selected-accordion-item=second-accordion-item-3. This link will open in a new tab in order to demonstrate the functionality.

Demo

Placeholder "fixed" element, should not overlap active accordion item when page first loads.

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twig

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  scroll_offset: 5,
} only %}

HTML

Accordion Use Case QA

This demo passes a type element into the trigger prop of the accordion-item.

Demo

You can debug the issues in connector through: 1) Tracing the connector activity if it is invoking through activity; 2) Add log message to the activity to check for logs; 3) If it is invoking through Data page, use response data transform to check for issues using when rules and invoke standard data transform template for logging along with email notification.

You can create a data object in Pega which will model the data you would like to retrieve. Create a data class and the properties that represent the data you would like to map. Create a REST connector and then reference that connector in a Data Page would be the way I would go about it.

No, this should be irrelevant because the procedure of deleting the property and recreating it again works. This would also be the last thing I would want to do since all developments are on this and it would be overkilling to restart due to this. However, I would like to know if Pega internally prevents that, if so, how do I circumvent that?

Twig

{% set trigger1 %}
  {% include '@bolt-elements-type/type.twig' with {
    content: 'What are the different ways we can debug an issue in Rest OR SOAP Connector?',
    weight: 'bold',
    tag: 'h2',
    size: 'medium',
    color: 'navy',
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: trigger1,
    content: 'You can debug the issues in connector through: 1) Tracing the connector activity if it is invoking through activity; 2) Add log message to the activity to check for logs; 3) If it is invoking through Data page, use response data transform to check for issues using when rules and invoke standard data transform template for logging along with email notification.',
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
  box_shadow: true,
} only %}

HTML

Accordion Use Case Schedule

This demo passes many kinds of content into various grids before passing those into the accordion-item props.

Demo

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation

Watch video

Twig

{% set trigger %}
  {% set headline_1 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: '12:00 PM',
    } only %}
  {% endset %}

  {% set headline_2 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lunch & Networking',
      size: 'xlarge',
    } only %}
  {% endset %}

  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12 3@small',
        content: headline_1,
      },
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: headline_2,
      },
    ]
  } only %}
{% endset %}

{% set content %}
  {% set link_1 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Get the presentation',
      icon_before: icon_presentation,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set link_2 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Watch video',
      icon_before: icon_video,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set content_item %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
    } only %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.',
      weight: 'bold',
    } only %}
    {% include '@bolt-components-list/list.twig' with {
      display: 'inline',
      spacing: 'small',
      items: [
        link_1,
        link_2,
      ]
    } only %}
  {% endset %}
  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: content_item,
      },
    ]
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: trigger,
    content: content,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Use Case Content Examples

An accordion component embeds a responsive, interactive accordion on the page.

Demo

This is a regular cell.	This is a regular cell.	This is a regular cell.
This is a regular cell.	This is a regular cell.	This is a regular cell.
This is a regular cell.	This is a regular cell.	This is a regular cell.

This is a headline

This is regular text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et.

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 ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab label 1

Tab Panel Small

Tab label 2

Tab Panel Medium

Tab label 3

Tab Panel Large

Slide 1

Slide 2

Slide 3

Twig

{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/placeholders/16x9.jpg',
      alt: 'Alt text.',
      loading: 'lazy',
      width: 800,
      height: 450,
    }
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Expand this to see an image.',
    content: image,
  } only %}
  ...
{% endset %}

{% include '@bolt-components-accordion/accordion.twig' with {
  content: items,
} only %}

HTML

Accordion Use Case Vertical Separator

There's a possibility to have two labels in the accordion item. We can achieve that by using the list element with a separator prop.

Demo

Lorem ipsum dolor sit amet..

Twig

{% set list_items %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading very long accordion first label',
    } only %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading second label',
    } only %}
  {% endset %}
  {% set double_label %}
    {% include '@bolt-elements-list/list.twig' with {
      separator: 'solid',
      content: list_items,
      display: 'horizontal',
      nowrap: true,
      tag: 'span'
    } only %}
  {% endset %}

  {% set accordion_items %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
  {% endset %}

  {% include '@bolt-components-accordion/accordion.twig' with {
    content: accordion_items,
  } only %}

HTML

accordion

accordion docs

Accordion

A vertical list of items, each of which can be expanded or collapsed to show more content.

accordion

accordion single

accordion no seperator

accordion box shadow

accordion spacing

accordion icon valign

accordion item open

accordion item inactive

accordion item deep linking

accordion deep linking with scroll offset

accordion use case qa

What are the different ways we can debug an issue in Rest OR SOAP Connector?

If the mapping of the data properties is in other systems then how can we retrieve those properties using REST Connector?

Can I have an exposed column that contain data as long as 500 chars?

accordion use case schedule

accordion use case content examples

This is a headline

accordion use case label vertiical separator

accordion

accordion docs Show Code Hide Code

Accordion

A vertical list of items, each of which can be expanded or collapsed to show more content.

accordion Show Code Hide Code

accordion single Show Code Hide Code

accordion no seperator Show Code Hide Code

accordion box shadow Show Code Hide Code

accordion spacing Show Code Hide Code

accordion icon valign Show Code Hide Code

accordion item open Show Code Hide Code

accordion item inactive Show Code Hide Code

accordion item deep linking Show Code Hide Code

accordion deep linking with scroll offset Show Code Hide Code

accordion use case qa Show Code Hide Code

What are the different ways we can debug an issue in Rest OR SOAP Connector?

If the mapping of the data properties is in other systems then how can we retrieve those properties using REST Connector?

Can I have an exposed column that contain data as long as 500 chars?

accordion use case schedule Show Code Hide Code

accordion use case content examples Show Code Hide Code

This is a headline

accordion use case label vertiical separator Show Code Hide Code

accordion docs

accordion

accordion single

accordion no seperator

accordion box shadow

accordion spacing

accordion icon valign

accordion item open

accordion item inactive

accordion item deep linking

accordion deep linking with scroll offset

accordion use case qa

accordion use case schedule

accordion use case content examples

accordion use case label vertiical separator