Accordion

FAQ Accordion

Create developer-friendly FAQ sections with comprehensive answers and practical guidance. This example demonstrates real-world questions developers ask when implementing accordions, complete with setup instructions, customization options, and responsive design considerations.

Interactive Accordion

Build dynamic accordions with JavaScript controls for programmatic manipulation. This example shows how to create open/close all functionality, individual panel controls, and integrate form elements within accordion panels for real admin interfaces.

Product Features Showcase

Design compelling product feature presentations with rich content, visual elements, and structured information. Perfect for SaaS landing pages, e-commerce product details, or service descriptions where you need to present complex features in an organized manner.

API Documentation

Create comprehensive API documentation with organized endpoints, parameters, and examples. This pattern is ideal for technical documentation where developers need quick access to different API methods while maintaining a clean, searchable interface.

Admin Settings Panel

Build comprehensive admin interfaces with organized settings sections. This example shows how to structure configuration panels with form elements, validation alerts, and logical grouping of related settings for better user experience.

Flush Style

The flush style accordion (.accordion-flush) removes borders and background colors, creating a minimalist appearance. This variant is ideal for clean, modern interfaces where the accordion needs to blend seamlessly with the surrounding design elements. The flush style reduces visual noise and works particularly well in content-focused layouts where the emphasis should be on the information rather than the UI components.

Multi-Panel Support

This variant allows multiple panels to remain open simultaneously by omitting the data-bs-parent attribute. It's particularly useful for comparison scenarios or when users need to reference multiple sections at once. Each panel maintains its state independently, providing a more flexible user experience. This approach is ideal for complex interfaces where users need to view multiple pieces of information simultaneously.

Custom Styled Accordion

Accordions can be customized with different colors, borders, and background styles to match your design system or to create visual hierarchy. This example demonstrates how to use utility classes to create custom-styled accordions with color-coded sections and integrated icons. Custom styling can help users quickly identify different categories of information or highlight important sections.

Simple Accordion

The simple accordion offers a clean, collapsible layout with arrow indicators that guide users through expanding and collapsing sections.

Accordion with Background

This accordion variant features a bordered background that visually separates each panel, enhancing readability and structure.

Accordion without Arrow

Designed for minimal interfaces, the accordion without arrow removes toggle icons while retaining full expand-and-collapse functionality.

Accordion with Icon

Each section in the icon-enhanced accordion includes a relevant icon beside the title, adding visual context to the content within.

Accordion with Indicator

Designed for intuitive interaction, the accordion with indicator replaces traditional arrows with plus and minus icons that reflect the open or closed state of each section.

Developer Tips & Best Practices

class AccordionManager {
  constructor(accordionId) {
    this.accordion = document.getElementById(accordionId);
    this.items = this.accordion.querySelectorAll('.accordion-collapse');
    this.buttons = this.accordion.querySelectorAll('.accordion-button');
  }

  openAll() {
    this.items.forEach((item, index) => {
      if (!item.classList.contains('show')) {
        new bootstrap.Collapse(item, { show: true });
        this.buttons[index].classList.remove('collapsed');
        this.buttons[index].setAttribute('aria-expanded', 'true');
      }
    });
  }

  closeAll() {
    this.items.forEach((item, index) => {
      if (item.classList.contains('show')) {
        new bootstrap.Collapse(item, { hide: true });
        this.buttons[index].classList.add('collapsed');
        this.buttons[index].setAttribute('aria-expanded', 'false');
      }
    });
  }

  toggle(index) {
    const item = this.items[index];
    const button = this.buttons[index];
    if (item && button) {
      new bootstrap.Collapse(item, { toggle: true });
      button.classList.toggle('collapsed');
      button.setAttribute('aria-expanded',
        !button.classList.contains('collapsed'));
    }
  }
}