x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div data-controller="collapsible"> <div class="flex flex-col"> <div class="flex items-center justify-between pi-4"> <h4 class="text-sm font-semibold"> Order #4189 </h4> <button type="button" class="btn btn--borderless p-2" data-action="collapsible#toggle"> <span class="icon icon--chevrons-up-down" aria-hidden="true"></span> <span class="sr-only">Toggle details</span> </button> </div> <div class="flex items-center justify-between rounded-md border pi-4 pb-2 mbs-2 text-sm"> <span class="text-subtle">Status</span> <span class="font-medium">Shipped</span> </div> </div> <details data-collapsible-target="details"> <summary hidden="hidden"></summary> <div class="rounded-md border pi-4 pb-2 mbs-2 text-sm"> <p class="font-medium">Shipping address</p> <p class="text-subtle">100 Market St, San Francisco</p> </div> <div class="rounded-md border pi-4 pb-2 mbs-2 text-sm"> <p class="font-medium">Items</p> <p class="text-subtle">2x Studio Headphones</p> </div> </details></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div data-controller="collapsible"> <div class="flex flex-col"> <div class="flex items-center justify-between pi-4"> <h4 class="text-sm font-semibold"> Order #4189 </h4> <button type="button" class="btn btn--borderless p-2" data-action="collapsible#toggle"> <span class="icon icon--chevrons-up-down" aria-hidden="true"></span> <span class="sr-only">Toggle details</span> </button> </div> <div class="flex items-center justify-between rounded-md border pi-4 pb-2 mbs-2 text-sm"> <span class="text-subtle">Status</span> <span class="font-medium">Shipped</span> </div> </div> <details data-collapsible-target="details"> <summary hidden="hidden"></summary> <div class="rounded-md border pi-4 pb-2 mbs-2 text-sm"> <p class="font-medium">Shipping address</p> <p class="text-subtle">100 Market St, San Francisco</p> </div> <div class="rounded-md border pi-4 pb-2 mbs-2 text-sm"> <p class="font-medium">Items</p> <p class="text-subtle">2x Studio Headphones</p> </div> </details></div>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "details" ] open() { this.detailsTarget.open = true } close() { this.detailsTarget.open = false } toggle() { this.detailsTarget.open ? this.close() : this.open() }}No notes provided.