Usage

Accordions are useful when you want to toggle between hiding and showing large amounts of content. They help reduce vertical space and improve the user experience by organizing content in a hierarchical, easy-to-scan way.

  • Use accordions to organize related information into sections
  • Allow users to focus on one section at a time
  • Reduce scrolling by collapsing content that's not immediately needed
  • Provide clear, descriptive headers for each accordion panel
  • Use proper visual cues (like icons) to indicate expand/collapse functionality

Basic Example

A simple accordion with expand/collapse functionality. Each panel can be opened and closed independently.

Meshery is the cloud native management plane offering lifecycle management of more Kubernetes-based infrastructure and applications.

Kanvas is a visual topology and infrastructure management tool for cloud native applications and infrastructure.

When to Use

Accordions are best used when you need to present multiple sections of content in a limited space. Here are some common use cases:

Frequently Asked Questions (FAQs)

Accordions are ideal for FAQ sections where users can expand only the questions they're interested in, making it easier to scan and find relevant information.

Visit the Layer5 community page, join our Slack, and explore the getting started guides for each project.

Yes, all Layer5 projects are open source and welcome contributions from the community.

Settings and Configuration Panels

Use accordions to organize different categories of settings, allowing users to focus on one category at a time.

Configure general application settings such as language, timezone, and default preferences.

Manage security settings including password policies, two-factor authentication, and API keys.

Control how and when you receive notifications from the platform.

Documentation and Help Sections

Organize documentation into collapsible sections to help users navigate through large amounts of information efficiently.

Best Practices

Follow these guidelines to ensure accordions are effective and user-friendly:

  • Clear Headers: Use descriptive, concise headers that clearly indicate the content within each panel. Users should be able to understand what information they'll find before expanding.

  • Logical Grouping: Group related content together and order panels in a logical sequence (alphabetical, chronological, or by importance).

  • Visual Indicators: Always use clear expand/collapse icons (like arrows) to indicate the current state and interactivity of each panel.

  • Controlled vs Uncontrolled: Decide whether multiple panels can be open simultaneously (uncontrolled) or only one at a time (controlled) based on your use case.

  • Accessible: Ensure accordions are keyboard accessible and work with screen readers. Use proper ARIA attributes for accessibility.

  • Performance: Avoid nesting too many accordions or placing heavy content inside panels that could slow down the page.

  • Mobile-Friendly: Accordions work particularly well on mobile devices where screen space is limited. Ensure touch targets are large enough.

  • Default State: Consider which panels (if any) should be expanded by default based on the most commonly accessed information.