Skip to Main Content

Library Services

new test

CM Accordion Examples

Standard Accordion (Default H2)

This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Standard Accordion Heading Styled Variants (h2 to h6)

These are 5 separate standard accordions, each using a different heading level from h2 to h6.

This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Standard Accordion Defined Color Styled Variants

These accordions use generic accent color modifier classes (e.g., .red, .teal) that override the default heading styles. All color-defined accordions use H2 headings for consistency. These are accent colors only - core colors (dark-blue, light-blue, etc.) are reserved for heading-styled accordions.

This accordion uses the .red modifier class. Perfect for warnings or important information.

This accordion uses the .jasper modifier class with a rich red-brown theme.

This accordion uses the .tomato modifier class with a bright orange-red theme.

This accordion uses the .coral modifier class with a warm coral theme.

This accordion uses the .sienna modifier class with an earthy brown theme.

This accordion uses the .bronze modifier class with a metallic bronze theme.

This accordion uses the .brown modifier class with a rich brown theme.

This accordion uses the .khaki modifier class with a muted olive theme.

This accordion uses the .olive modifier class with an olive green theme.

This accordion uses the .green modifier class with a deep green theme.

This accordion uses the .teal modifier class with a teal blue-green theme.

This accordion uses the .aquamarine modifier class with a blue-green theme.

This accordion uses the .ocean modifier class with an ocean blue theme.

This accordion uses the .blue modifier class with a medium blue theme.

This accordion uses the .midnight modifier class with a deep midnight blue theme.

This accordion uses the .purple modifier class with a deep purple theme.

This accordion uses the .amethyst modifier class with a purple-grey theme.

This accordion uses the .violet modifier class with a purple-pink theme.

This accordion uses the .blossom modifier class with a pink-purple theme.

This accordion uses the .pink modifier class with a soft pink theme.

Independent Single Accordions (Dropdown Style)

These accordions work independently - multiple can be open at the same time, similar to dropdown menus.

Frequently Asked Questions
How do I use this feature?

This feature can be used by following the simple steps outlined in our documentation.

What are the system requirements?

The system requires a modern web browser and JavaScript enabled.

Is this feature free to use?

Yes, this feature is completely free for all users.

Project Tasks
Progress: 2 of 5 tasks completed
40%

Independent Accordion Heading Variants (h2 to h6)

These accordions work independently - multiple can be open at the same time. Each uses a different heading tag while maintaining the same functionality.

H2 Accordion Content

This accordion uses an <h2> element for its header. This is the most common and semantically correct choice for main section headings.

Independent Behavior: Multiple accordions can be open simultaneously.

H3 Accordion Content

This accordion uses an <h3> element for its header. H3 is appropriate for subsections within a main section.

  • Subsection heading
  • Secondary content
  • Nested information

H4 Accordion Content

This accordion uses an <h4> element for its header. H4 is suitable for minor subsections or detailed content areas.

Left column content

Detailed information goes here.

Right column content

Additional details and notes.

This accordion uses an <h5> element for its header. H5 is typically used for very specific or detailed content sections.

Detail Specific Content

This level is often used for fine-grained content organization.

This accordion uses an <h6> element for its header. H6 is the smallest heading level and is used for the most specific content.

H6 is the smallest heading level

Often used for footnotes, fine details, or very specific content areas.

Flush Accordion

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Always Open Accordion (Multiple items can be open)

This is the first accordion item's content. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third accordion item's content. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Custom Styled Accordion

Key Features
  • Responsive design
  • Accessible markup
  • Custom styling options
Benefits
  • Better user experience
  • Organized content
  • Space efficient

Note: This section contains configuration options and settings that can be customized according to your needs.

You can add any content here including forms, tables, or other Bootstrap components.

Accordion with Rich Content

Card Title

Some quick example text to build on the card title.

Go somewhere
Another Card

More content in a card format.

Learn more
Third Card

Even more content examples.

Success

We'll never share your email with anyone else.

Positioning Modifiers

Accordions can use the width and positioning utility classes for flexible layouts. These utilities are responsive and stack on small screens (xs/sm) while applying on medium screens and up.

Float Positioning (Text Wrapping)

Use width-* and float-* classes for accordions that text should wrap around.

This accordion uses width-40 float-right classes. Text will wrap around it on medium screens and up.

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.

This accordion uses width-30 float-left classes for a narrower left-floated layout.

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.

Flexbox Positioning (Array Layouts)

Use width-* and position-* classes within flex containers for precise control over multiple accordions.

Uses width-30 position-left

Uses width-40 position-center

Uses width-25 position-right

Convenience Combinations

Quick combination classes for common use cases.

This uses the convenience class width-40-right which combines 40% width with right float positioning.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Responsive Behavior

Width and positioning utilities for accordions adapt automatically:

  • Medium+ screens (≥768px): Width percentages and positioning classes apply
  • Small screens (<768px): All elements stack at 100% width, no positioning
  • Spacing: Consistent 1rem gaps and margins for proper content separation
  • Available widths: 10, 20, 25, 30, 33, 40, 50, 60, 67, 70, 80, 90, 100 percent

Intext Modifiers

Heading Level Override Examples

The .intext utility class can override heading-based accordion styling. This removes button backgrounds, borders, and moves the toggle arrow to the left while maintaining the normal accordion structure.

This H2 accordion uses the .intext utility class to remove the button styling and borders while maintaining the H2 heading structure. Notice how the toggle arrow appears on the left and the button has no background or borders.

This H3 accordion uses the .intext utility to override the default H3 accordion styling. The font size automatically uses the H3 typography scale while maintaining the minimal intext appearance.

Similarly, this H4 accordion demonstrates how the .intext utility overrides the default H4 accordion styling. The utility provides a clean, minimal appearance with left-aligned toggle arrow while preserving the semantic heading structure.

Key Features:
  • Removes button background and borders
  • Positions toggle arrow on the left
  • Maintains semantic heading levels
  • Clean, minimal appearance
This H5 accordion shows how the .intext utility works with smaller heading levels. The H5 font size is maintained while applying the minimal styling approach typical for detailed content sections.
This H6 accordion demonstrates the smallest heading level with the .intext utility. Note how it looks very similar to the standard H6 accordion since both use minimal styling, but the .intext class provides consistent behavior across all heading levels.
Semantic Accessibility: The .intext utility allows you to use the appropriate heading level for your document's semantic structure (H2, H3, H4, etc.) while providing a clean, minimal visual presentation. This maintains proper document hierarchy for accessibility tools while achieving the desired minimal styling.