toggle

Usage

<div data-controller="toggle">
  <button data-action="click->toggle#toggle">
    Toggle
  </button>
  <div data-toggle-target="content" class="hidden">
    Hidden content
  </div>
</div>

Targets

Actions

Source

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["content"];
  static values = {
    hiddenClass: { type: String, default: "hidden" }
  };

  toggle() {
    this.contentTarget.classList.toggle(this.hiddenClassValue);
  }

  show() {
    this.contentTarget.classList.remove(this.hiddenClassValue);
  }

  hide() {
    this.contentTarget.classList.add(this.hiddenClassValue);
  }
}