Toggle Controller

toggle_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['content', 'keyword', 'iconDown', 'iconUp']

  toggle () {
    if (this.contentTarget.classList.contains('hidden')) {
      this.showContent()
      this.changeKeyword('Hide')
    } else {
      this.hideContent()
      this.changeKeyword('Show')
    }

    this.toggleIcon()
  }

  showContent () {
    this.contentTarget.classList.remove('hidden')
  }

  hideContent () {
    this.contentTarget.classList.add('hidden')
  }

  changeKeyword (keyword) {
    if (this.hasKeywordTarget) this.keywordTarget.innerHTML = keyword
  }

  toggleIcon () {
    if (this.hasIconDownTarget) this.iconDownTarget.classList.toggle('hidden')
    if (this.hasIconUpTarget) this.iconUpTarget.classList.toggle('hidden')
  }
}