wckd
THIS IS WCKD ™
   

Early Access

Accordion

Easily expand and collapse content by turning your grid into an accordion.

Accordion Example

WCKD UI Accordion

  1. If you haven't yet, set up your WCKD UI

    Get WCKD UI

  2. Use the following code in your website:

    <div class="columns wckd-accordion" data-show-filter="" data-show-expand-all="">
	<div class="column">
		<button class="accordion-toggle">One</button>
		<div class="accordion-content">
			 Your
		</div>
	</div>
	<div class="column">
		<button class="accordion-toggle">Two</button>
		<div class="accordion-content">
			 content 
		</div>
	</div>
	<div class="column">
		<button class="accordion-toggle">Three</button>
		<div class="accordion-content">
			here
		</div>
	</div>
</div>
Your
content
here

Accordion HTML Structure

  • section
    • div.accordion-toolbar
      • form.accordion-filter
        • input.wckd-filter
      • button.open-all
    • div.columns.wckd-accordion
      • div.column
        • button.accordion-toggle
        • div.accordion-content

Accordion Options

data-show-expand-all=""
data-show-filter=""
wckd-icon
Manually adding an icon to the button will overwrite the default chevron

Updates

  • April 30, 2024: v1.1.0 : Data attributes are no longer active by default

Known bugs

  • Display issue when using Open All button while a search is active