ComponentsAccordion
Hello Yumma UI! 🎉

Accordion

Displays collapsible content sections that expand and collapse on user interaction.

Basic Accordion

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c">
  <div class="d-f fd-c w-full">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-1"
        aria-expanded="false"
        aria-controls="accordion-panel-1"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <span class="ff-s tc-slate fs-md">Is Yumma CSS free?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-1" aria-labelledby="accordion-button-1" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-none">
      <p class="tc-slate-6 m-0">Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-2"
        aria-expanded="false"
        aria-controls="accordion-panel-2"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 bt-0 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <span class="ff-s tc-slate fs-md">Can I use it with React?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-2" aria-labelledby="accordion-button-2" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-none">
      <p class="tc-slate-6 m-0">Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-3"
        aria-expanded="true"
        aria-controls="accordion-panel-3"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 bt-0 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <span class="ff-s tc-slate fs-md">Is Yumma UI mobile friendly?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <polyline points="48 160 128 80 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-3" aria-labelledby="accordion-button-3" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-b">
      <p class="tc-slate-6 m-0">Yes, Yumma UI is mobile-friendly and works great on all devices.</p>
    </section>
  </div>
</div>

Separated

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c g-2">
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-sep-1"
        aria-expanded="false"
        aria-controls="accordion-panel-sep-1"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <span class="ff-s tc-slate fs-md">Is Yumma CSS free?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-sep-1" aria-labelledby="accordion-button-sep-1" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-none">
      <p class="tc-slate-6 m-0">Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-sep-2"
        aria-expanded="true"
        aria-controls="accordion-panel-sep-2"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <span class="ff-s tc-slate fs-md">Can I use it with React?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <polyline points="48 160 128 80 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-sep-2" aria-labelledby="accordion-button-sep-2" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-b">
      <p class="tc-slate-6 m-0">Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.</p>
    </section>
  </div>
</div>

Ghost

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c">
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-ghost-1"
        aria-expanded="false"
        aria-controls="accordion-panel-ghost-1"
        class="p-4 c-p d-f jc-sb ai-c w-full bb-1 bc-silver-4 fw-600 rad-0 bg-transparent h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2 b-0"
      >
        <span class="ff-s tc-slate fs-md">Is Yumma CSS free?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-ghost-1" aria-labelledby="accordion-button-ghost-1" class="p-4 bg-transparent tc-slate fs-sm lh-4 bb-1 bc-silver-4 d-none">
      <p class="tc-slate-6 m-0">Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-ghost-2"
        aria-expanded="false"
        aria-controls="accordion-panel-ghost-2"
        class="p-4 c-p d-f jc-sb ai-c w-full bb-1 bc-silver-4 fw-600 rad-0 bg-transparent h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2 b-0"
      >
        <span class="ff-s tc-slate fs-md">Can I use it with React?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-ghost-2" aria-labelledby="accordion-button-ghost-2" class="p-4 bg-transparent tc-slate fs-sm lh-4 bb-1 bc-silver-4 d-none">
      <p class="tc-slate-6 m-0">Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-ghost-3"
        aria-expanded="true"
        aria-controls="accordion-panel-ghost-3"
        class="p-4 c-p d-f jc-sb ai-c w-full bb-1 bc-silver-4 fw-600 rad-0 bg-transparent h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2 b-0"
      >
        <span class="ff-s tc-slate fs-md">Is Yumma UI mobile friendly?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <polyline points="48 160 128 80 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-ghost-3" aria-labelledby="accordion-button-ghost-3" class="p-4 bg-transparent tc-slate fs-sm lh-4 bb-1 bc-silver-4 d-b">
      <p class="tc-slate-6 m-0">Yes, Yumma UI is mobile-friendly and works great on all devices.</p>
    </section>
  </div>
</div>

Icons

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c g-2">
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-icon-1"
        aria-expanded="false"
        aria-controls="accordion-panel-icon-1"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <div class="d-f ai-c g-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
          </svg>
          <span class="ff-s tc-slate fs-md">Is Yumma CSS free?</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-icon-1" aria-labelledby="accordion-button-icon-1" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-none">
      <p class="tc-slate-6 m-0">Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-icon-2"
        aria-expanded="false"
        aria-controls="accordion-panel-icon-2"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <div class="d-f ai-c g-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
          </svg>
          <span class="ff-s tc-slate fs-md">Can I use it with React?</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" fill="currentColor" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-icon-2" aria-labelledby="accordion-button-icon-2" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-none">
      <p class="tc-slate-6 m-0">Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.</p>
    </section>
  </div>
  <div class="d-f fd-c w-full p-0">
    <h4 class="m-0">
      <button
        type="button"
        id="accordion-button-icon-3"
        aria-expanded="true"
        aria-controls="accordion-panel-icon-3"
        class="p-4 c-p d-f jc-sb ai-c w-full b-1 bc-silver-4 fw-600 rad-0 bg-white h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
      >
        <div class="d-f ai-c g-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
            <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" />
          </svg>
          <span class="ff-s tc-slate fs-md">Is Yumma UI mobile friendly?</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" class="tc-slate-8 h-4 w-4" viewBox="0 0 256 256" aria-hidden="true">
          <polyline points="48 160 128 80 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        </svg>
      </button>
    </h4>
    <section id="accordion-panel-icon-3" aria-labelledby="accordion-button-icon-3" class="p-4 bg-white tc-slate fs-sm lh-4 b-1 bc-silver-4 bt-0 d-b">
      <p class="tc-slate-6 m-0">Yes, Yumma UI is mobile-friendly and works great on all devices.</p>
    </section>
  </div>
</div>