details

Does it work without JavaScript?

Yes, this element is a progressive enhancement on the native HTMLDetailsElement element.

<drab-details
    animation-keyframe-from-grid-template-rows="0fr"
    animation-keyframe-to-grid-template-rows="1fr"
>
    <details class="group overflow-hidden border-b px-4 pb-2 pt-4">
        <summary
            data-trigger
            class="link flex list-none items-center justify-between gap-8 py-2"
        >
            <span>Does it work without JavaScript?</span>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="size-4 transition group-[[open]]:rotate-180"
            >
                <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd"
                />
            </svg>
        </summary>
        <div data-content class="grid">
            <div class="overflow-hidden">
                Yes, this element is a progressive enhancement on the native
                <code>HTMLDetailsElement</code>
                element.
            </div>
        </div>
    </details>
</drab-details>

<style>
    /* for safari */
    summary::-webkit-details-marker {
        display: none;
    }
</style>

Overview

This element provides a progressive enhancement on top of the HTMLDetailsElement to animate it with the Web Animations API.

The best way I’ve found to animate the details element is using CSS grid from this Kevin Powell video. The example demonstrates this animation. If you know the exact height of the content, you could animate height instead.

Extends

Animate

Constructors

new Details()

new Details(): Details

Properties

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Animate.#listenerController

Source

src/package/base/index.ts:17

Accessors

animationOptions

get animationOptions(): KeyframeAnimationOptions

Returns

KeyframeAnimationOptions

An object containing the values of each animation-option attribute

Source

src/package/animate/index.ts:46

details

get details(): HTMLDetailsElement

Returns

HTMLDetailsElement

Source

src/package/details/index.ts:20

event

get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

keyframes

get keyframes(): Keyframe[]

Returns

Keyframe[]

Source

src/package/animate/index.ts:128

Methods

animateElement()

animateElement(animateOptions): Promise<void>

Parameters

• animateOptions= undefined

animates this.content() by default

• animateOptions.element?: HTMLElement

• animateOptions.options?: KeyframeAnimationOptions

Returns

Promise<void>

Inherited from

Animate.animateElement

Description

Animates a particular element using the web animations API.

Disables animation if the user prefers reduced motion.
Sets default options
Uses the keyframes provided from this.keyframes
Waits for the animation to complete
Sets the start and end styles based on the first and last keyframe

Source

src/package/animate/index.ts:76

close()

close(): Promise<void>

Closes details with animation.

Returns

Promise<void>

Source

src/package/details/index.ts:33

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Animate.connectedCallback

Source

src/package/base/index.ts:155

destroy()

destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Animate.destroy

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Animate.disconnectedCallback

Source

src/package/base/index.ts:167

getContent()

getContent<T>(instance): T

Type parameters

• T extends HTMLElement = HTMLElement

Parameters

• instance= undefined

The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Inherited from

Animate.getContent

Default

this.querySelector("[data-content]");

Source

src/package/base/index.ts:55

getTrigger()

getTrigger<T>(): NodeListOf<T>

Type parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Inherited from

Animate.getTrigger

Default

this.querySelectorAll("[data-trigger]");

Source

src/package/base/index.ts:42

mount()

mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.