details

Source

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>