Accordion

Sometimes referred to as "dropdown". An interactive component that enables the organization and navigation of content by allowing users to expand and collapse sections.

Demo

This is an accordion group

This is the accordion trigger

This is the accordion content

This is the accordion trigger

This is the accordion content

Scripts

Add these before the </body> tag in your site/page settings

GSAP

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Accordion component

<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/accordion.js"></script>

Features

Full keyboard navigation
All attributes for screen readers added
Can expand one or multiple items

Anatomy

Group
- Root
  - Trigger
  - Content

Usage

Main Attributes:

s-accordion = group - The parent div that holds the accordions. By default, one accordion is open per group.

s-accordion = root - The root element of the accordion. A div that holds the trigger button and the content.

s-accordion = trigger - A div or button that when clicked will open or close the accordion.

s-accordion = content - A div that has hidden content, only shown when the accordion is open. Do not add padding to this element, as it will not allow it to have 0 height. For padding, add another div inside that will add padding to the content.

‍

Options (add to group element):

s-ease - Change easing. See GSAP Eases for options. Default: power3.inOut

s-duration - Set duration (in seconds). Default: 0.5

s-multiple - Allows multiple accordions to be open

s-first-open - Have the first accordion open by default

‍

Animating an icon:

s-add-class - Adds an active class to the element that has it when an accordion opens. You can add a combo class to that element called s-active and change its styling on that combo class. Then remove the combo class before publishing. Make sure to add that combo class in a hidden page so that you don't lose it when you clean up classes. Note, an active class gets added to the element root by default.

s-active-class - (Add this to the accordion group!) Change the active class that gets added to elements that have the attribute s-add-class. Default: s-active

Advanced

Events

accordion-open

accordion-close

In both events, the accordion being toggled can be accessed through event.detail.

Example usage:

window.addEventListener('accordion-open', (event)=> {
    console.log(event.detail)
})

No custom events are exported for this component.

Methods

socks.accordions["id"].open() - Open accordion with given ID

socks.accordions["id"].close() - Close accordion with given ID

Note: If you don't add your own IDs, Socks UI will generate them for you. The format is "accordion-" + Group index + Accordion index.
So the first accordion would have the ID "accordion-0-0"

How to use them:

// this opens the accordion that has the ID "some-id"
socks.accordions["some-id"].open()

// you could also save them in your own variable to shorten it:
const accordions = socks.accordions;
accordions["some-id"].open()


// if your ID doesn't have dashes, you could also do this:
socks.accordions.some_id.open()

No custom methods are exported for this component.

Use Cases

No special use cases added yet

Installation

Accordion