Accordion — wd-accordion

Category: Content · Tag: wd-accordionBack to: Components overview

---

What it does

A stack of collapsible sections. Each section has a header; clicking a header expands its content and collapses the others (one open at a time).

---

Adding it & its settings

Add Component → Content → Accordion.

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings: none — the accordion is built entirely from the content you put inside it.

---

Content & slots

• Default slot — one child element per section. Each child provides:
  • a header attribute → the section's header text,
  • its inner HTML → the section's collapsible content.

<wd-accordion>
  <div header="Shipping">We ship worldwide within 3–5 days.</div>
  <div header="Returns">Free returns within 30 days.</div>
</wd-accordion>

The component reads these children on load, builds the accordion, and removes the original elements. The first click opens a section; clicking it again closes it.

---

Styling

CSS variables

Container & items

Variable	Default
--wd-accordion-border	1px solid #ccc
--wd-accordion-border-radius	4px
--wd-accordion-item-border	1px solid #ccc
--wd-accordion-content-max-height	auto

Header

Variable	Default
--wd-accordion-header-background	#f7f7f7
--wd-accordion-header-hover-background	#e2e2e2
--wd-accordion-header-gap	1rem
--wd-accordion-header-min-height	4rem
--wd-accordion-header-padding	1rem

Header text

Variable	Default
--wd-accordion-header-text-font-color	#333
--wd-accordion-header-text-font-family	sans-serif
--wd-accordion-header-text-font-size	1.5rem
--wd-accordion-header-text-font-weight	normal
--wd-accordion-header-text-margin	0
--wd-accordion-header-text-padding	0

Header icon (the +/− toggle)

Variable	Default
--wd-accordion-header-icon-color	#333
--wd-accordion-header-icon-font-size	1.5rem
--wd-accordion-header-icon-size	1.5rem

::part()

Part	Element
accordion-<id>	The accordion container.

wd-accordion::part(accordion-faq) { box-shadow: 0 1px 4px rgba(0,0,0,.08); }

---

Notes

• One open at a time: opening a section closes the previously open one.
• The component emits an accordionToggle event when a section opens/closes (useful for custom scripts).