Css Zero Showcase
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
<div data-controller="collapsible">
  <div class="flex flex-col gap-half">
    <div class="flex items-center justify-between gap pi-4">
      <h4 class="text-sm font-semibold">
        @lazaronixon starred 3 repositories
      </h4>
      <button class="btn btn--borderless p-2" data-action="collapsible#toggle">
        <img aria-hidden="true" src="/assets/chevrons-up-down-dc468896.svg" width="16" height="16" />
        <span class="sr-only">Toggle</span>
      </button>
    </div>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/rails
    </div>
  </div>
  <details data-collapsible-target="details">
    <summary hidden="hidden"></summary>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/jbuilder
    </div>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/jsbundling-rails
    </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
<div data-controller="collapsible">
  <div class="flex flex-col gap-half">
    <div class="flex items-center justify-between gap pi-4">
      <h4 class="text-sm font-semibold">
        @lazaronixon starred 3 repositories
      </h4>
      <button class="btn btn--borderless p-2" data-action="collapsible#toggle">
        <%= image_tag "chevrons-up-down.svg", size: 16, aria: { hidden: true } %>
        <span class="sr-only">Toggle</span>
      </button>
    </div>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/rails
    </div>
  </div>
  <details data-collapsible-target="details">
    <summary hidden="hidden"></summary>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/jbuilder
    </div>
    <div class="rounded-md border pi-4 pb-3 mbs-2 text-sm">
      @rails/jsbundling-rails
    </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.