Copy paste parts from Stimulus Workshop

01_declaring_controller.html

# app/views/schedule/index.html.erb:29-30
<section class="day-body"
  id="day-body-<%= schedule_day.day.by_example("2006-01-02") %>"
  data-controller="toggle">

02_initial_controller.js

// app/javascript/controllers/toggle_controller.js

import { Controller } from "stimulus"

export default class extends Controller {

  connect() {
    console.log("The Controller is Connected")
  }

}

03_add_action.html

# app/views/works/index.html.erb:14

Files: <button data-action="click->toggle#toggle">Hide</button>

04_update_controller_with_action.js

# in the class in app/javascript/controllers/toggle_controller.rb

toggle() {
  console.log("click")
}

05_add_target.html

# app/views/works/index.html.erb:39

<section data-target="toggle.thingToHide">

06_register_target.js

# in the class in app/javascript/controllers/toggle_controller.rb

static targets = ["thingToHide"]

07_action_that_works.js

# in the class in app/javascript/controllers/toggle_controller.rb

toggle() {
  this.thingToHideTarget.classList.toggle("is-hidden")
}

08_data_maps.html

# in app/views/works/index.html.haml

<section class="day-body"
  id="day-body-<%= schedule_day.day.by_example("2006-01-02") %>"
  data-controller="toggle"
  data-toggle-hidden="false">

09_another_target.html

<span data-target="toggle.text">Hide</span>

10_toggling_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["text", "thingToHide"]

  isHidden() { return this.data.get("hidden") === "true" }

  flip() { this.data.set("hidden", this.isHidden() ? "false" : "true") }

  toggle() {
    this.flip()
    this.thingToHideTarget.classList.toggle("is-hidden", this.isHidden())
    this.textTarget.innerText = this.isHidden() ? "Show" : "Hide"
  }

}