Accordion

Collapsible content sections for organizing information in limited space.

Basic Accordion

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

You can install EthioWDS via npm: npm install @abiyub/ethiowds or use the CDN for quick prototyping.

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

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

Bordered Accordion

This accordion has individual borders around each item.

Perfect for when you need visual separation between items.

<div class="ethio-accordion ethio-accordion-bordered">
    <!-- Items with individual borders -->
  </div>