Accordion

Collapsible content sections for organizing information in limited space.

Basic Accordion

What is EthioWDS?▼

EthioWDS is a comprehensive design system for Ethiopian government websites, providing consistent, accessible components with Ethiopian identity.

How do I install it?▼

Follow the installation guide to add EthioWDS to your project. You can use a package manager, download the release, or include the design system from a CDN for quick prototyping.

Is it accessible?▼

Yes! All EthioWDS components are built with accessibility in mind, following WCAG guidelines.

<div class="ethio-accordion" data-accordion>
  <div class="ethio-accordion-item" data-accordion-item>
    <button type="button" class="ethio-accordion-header" data-accordion-trigger>
      Section Title
      <span class="ethio-accordion-icon">▼</span>
    </button>
    <div class="ethio-accordion-content" data-accordion-content>
      <p>Section content goes here.</p>
    </div>
  </div>
</div>

Bordered Accordion

Bordered Item 1▼

This accordion has individual borders around each item.

Bordered Item 2▼

Perfect for when you need visual separation between items.

<div class="ethio-accordion ethio-accordion-bordered" data-accordion>
  <!-- Items use data-accordion-item, data-accordion-trigger, data-accordion-content -->
</div>