https://www.publishersglobal.com/assets/controllers/collapsible_controller-3bfc73cb.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="collapsible"
4// Use data-collapsible-expanded-value="true" to start expanded
5export default class extends Controller {
6  static targets = ["content", "icon"]
7  static values = { expanded: { type: Boolean, default: false } }
8
9  connect() {
10    if (this.expandedValue) {
11      // Start expanded
12      if (this.hasContentTarget) {
13        this.contentTarget.classList.remove("hidden")
14      }
15      if (this.hasIconTarget) {
16        this.iconTarget.classList.remove("rotate-0")
17        this.iconTarget.classList.add("rotate-180")
18      }
19    } else {
20      // Start collapsed (default)
21      if (this.hasContentTarget) {
22        this.contentTarget.classList.add("hidden")
23      }
24      if (this.hasIconTarget) {
25        this.iconTarget.classList.add("rotate-0")
26        this.iconTarget.classList.remove("rotate-180")
27      }
28    }
29  }
30
31  toggle() {
32    if (!this.hasContentTarget) return
33
34    const isHidden = this.contentTarget.classList.contains("hidden")
35    
36    if (isHidden) {
37      // Expand
38      this.contentTarget.classList.remove("hidden")
39      if (this.hasIconTarget) {
40        this.iconTarget.classList.remove("rotate-0")
41        this.iconTarget.classList.add("rotate-180")
42      }
43    } else {
44      // Collapse
45      this.contentTarget.classList.add("hidden")
46      if (this.hasIconTarget) {
47        this.iconTarget.classList.remove("rotate-180")
48        this.iconTarget.classList.add("rotate-0")
49      }
50    }
51  }
52}
53