Details

Docs & Examples

• winduum
• winduum-stimulus

Source

• Details.js

Stimulus Actions

toggle

<details class="x-details group" data-controller="x-details">
    <summary class="flex items-center p-4" data-action="click->x-details#toggle:prevent">
        Show more
        <svg class="size-4 group-open:-scale-y-100 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
        </svg>
    </summary>
    <div style="display: none">
        <div class="p-4">
            Details content
        </div>
    </div>
</details>

show

<details class="x-details" data-controller="x-details">
    <summary class="p-4" data-action="click->x-details#show:prevent">
        Show more
    </summary>
    <div style="display: none">
        <div class="p-4">
            Details content
        </div>
    </div>
</details>

close

<details class="x-details" data-controller="x-details">
    <summary class="p-4" data-action="click->x-details#show:prevent">
        Show more
    </summary>
    <div style="display: none">
        <div class="p-4">
            Details content
            <button class="x-button" data-action="x-details#close">Close details</button>
        </div>
    </div>
</details>