Accordion · Parallelogram

One answer open at a time Independent items

Can I change my order?

Yes, until it leaves the warehouse. Change it from the confirmation email.

How long does delivery take?

Orders arrive within two working days in most areas.

Can I return something?

Send anything back within 30 days for a full refund.

<details data-accordion name="faq">
  <summary>Can I change my order?</summary>
  <div>
    <p>Yes, until it leaves the warehouse. Change it from the confirmation email.</p>
  </div>
</details>
<details data-accordion name="faq">
  <summary>How long does delivery take?</summary>
  <div>
    <p>Orders arrive within two working days in most areas.</p>
  </div>
</details>
<details data-accordion name="faq">
  <summary>Can I return something?</summary>
  <div>
    <p>Send anything back within 30 days for a full refund.</p>
  </div>
</details>

Output Markup State Events

Ingredients

Flour, water, salt and a sourdough starter.

Method

Mix, rest overnight, shape and bake at 240°C for 40 minutes.

<details data-accordion open>
  <summary>Ingredients</summary>
  <div>
    <p>Flour, water, salt and a sourdough starter.</p>
  </div>
</details>
<details data-accordion>
  <summary>Method</summary>
  <div>
    <p>Mix, rest overnight, shape and bake at 240°C for 40 minutes.</p>
  </div>
</details>

About

The markup is plain <details> and <summary>, so without JavaScript every item still opens and closes, instantly, and find in page can open a closed one. Accordion takes over the summary's click to animate the height of the item instead, and writes data-accordion-state for styles.

Details that share a name close each other with the same animation, including in browsers that don't support name on details yet. An item opened or closed another way, such as by find in page or a script setting open, changes at once. The animation is skipped when the user prefers reduced motion.

Accessibility

The summary is the native disclosure control, so it is focusable, opens with Enter or Space, and reports expanded or collapsed without extra ARIA. Accordion only changes how the item animates.

Usage

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-accordion]', () => import('@parallelogram-js/core/components/Accordion'));
app.run();

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/accordion.css';

Attributes

Name	Type	Default	Description
`data-accordion`	flag	none	Marks a details element to animate
`data-accordion-state`set by the component	`closed` \| `opening` \| `open` \| `closing`	none	The item's state

Methods

Name	Signature	Description
`show`	`(element: HTMLElement) => void`	Open an item, closing the others that share its name
`hide`	`(element: HTMLElement) => void`	Close an item
`toggle`	`(element: HTMLElement) => void`	Open a closed item or close an open one

Events

Name	Detail	Description
`accordion:show`	`{ element: HTMLElement }`	An item started opening, or was opened another way DOM event and event bus
`accordion:hide`	`{ element: HTMLElement }`	An item started closing, or was closed another way DOM event and event bus

CSS custom properties

Name	Default	Description
`--accordion-duration`	`0.3s`	Length of the open and close animation
`--accordion-easing`	`ease`	Easing of the open and close animation
`--accordion-border-color`	`var(--surface-item-border-color, var(--color-border, #e2e8f0))`	The lines between and around the items: the item border colour
`--accordion-summary-padding`	`1rem 1.25rem`	Padding around each summary
`--accordion-summary-color`	`var(--surface-item-color-text, #111827)`	Summary text colour: the item text colour, which is the page's text colour
`--accordion-summary-hover-bg`	`var(--color-hover, #f9fafb)`	Summary background on hover: the hover tint
`--accordion-content-padding`	`0 1.25rem 1.25rem`	Padding around the content element after each summary
`--accordion-content-color`	`var(--surface-item-color-text, #374151)`	Content text colour: the item text colour, which is the page's text colour
`--accordion-icon`	none	The icon image, used as a mask: a plus from Tabler Icons by default
`--accordion-icon-size`	`1.25rem`	Width and height of the icon
`--accordion-icon-color`	`currentColor`	Icon colour, the summary text colour by default
`--accordion-icon-rotation`	`45deg`	How far the icon turns while the item is open