An open-by-default Webflow-native accordion component

Accordions are complicated because they need to function both independently & as a whole. This accordion does that, & also has optional functionality to default a drawer to open & is also keyboard navigable.

Step 1 - Build out the UI

This accordion consists of 5 main components: Accordion wraps the individual drawer, allowing all of the inner subcomponents to be targeted relatively & defines the outer style & the hover state background for the drawer. Accordion Head is the clickable element that opens the accordion & also wraps the headline & body content, defining the keyboard target area of the drawer. The Accordion Body is a child of the Accordion Head, which contains the drawer content in the "open" state. And the Accordion Close is a sibling to the Accordion Head & is hidden by default but displays when the drawer is in the "open" state & triggers the drawer to close.

The Accordion must be set to overflow: visible;, or else it will hide the keyboard focus outline of the Accordion Head. It must also be set to position: relative; to define the position area for the Accordion Close div. The Accordion Body must be set to overflow: hidden; in order to disappear the drawer content in the "close" state. It also must have no padding applied in order to fully close; any styling of the drawer content should be to a div nested inside the Accordion Body. The Accordion Close must be set to position: absolute; & set to cover the full component.

Step 2 - Apply Trigger & Default classes

Any element that animates during the open/close interaction will need two classes applied: the base class & the trigger class. A drawer that is set to open by default will also need a default class.

The way that the drawers all work in concert with one another is that when a drawer is clicked, the interaction references the trigger classes to close all drawers then references the base classes based on relative relationships (parent/sibling/child) to override the close animation & open the targeted drawer. So base classes are used for opening, trigger classes are used for closing, & default classes simply override the initial (closed) state.

These classes will be applied as combo classes (Accordion Body Accordion Body Trigger Accordion Body Default), but will need to be created as base classes rather than subclasses before being applied to the element in order to be selected individually in the Class selector in the Interaction Panel.

In the most basic implementation, only the Accordion Body & Accordion Close need Trigger classes. But if you animate background colors or open/close icons, those will also need them.

Step 3 - Create the Accordion Open interaction

The basic steps are that Accordion Body is set to height: 0px; as the initial state, then when Accordion Head is clicked, Accordion Close is set to display: block; & Accordion Body is set to height: auto;. But getting multiple drawers to work in concert with one another is a little more tricky.

First, we'll create this interaction on the Accordion Head element & set it to trigger on the class so that we can reuse it across multiple drawers. Then we'll define the individual animations in 3 groups, as shown below.

The default classes (green) all define the open positions as initial states via relative relationships (parent/sibling/child). The Trigger classes (red) define the close animations for all elements. And the base classes (uncolored) define the closed initial state of Accordion Body & the open animations via relative relationships.

The order is essential because default class initial states need to override the base class initial state & the base class animations need to override the trigger class animations.

Step 4 - Create the Accordion Close interaction

This interaction is created on the Accordion Close element, set it to trigger on the class so that we can reuse it across multiple drawers, & simply sets all of the base classes back to their initial state.

Step 5 - Add the javascript for closing drawers with the ESC key

The final step makes the component fully keyboard navigable by closing the open accordion using the ESC key. This code should be added at the end of the <body> tag.

<script>

// Close on ESC button
$('.accordion-close') && $(document).keydown(function (e) {
 if (e.key === 'Escape') {
  $('.accordion-close').click();
 }
});

</script>