Basic toggle controller to show/hide elements

toggle_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "toggleable" ]

  connect() {
    this.toggleClass = this.data.get("class") || "hidden"
  }

  toggle(event) {
    event.preventDefault()

    this.toggleableTargets.forEach( target => {
      target.classList.toggle(this.toggleClass)
    })
  }
}

When implementing sidebar navigation with collapsable subsections, you can use the toggle controller to show/hide the subsections using whatever icon you'd like (in this case, an arrow).

<div class='my-2' data-controller='toggle'>
   <!-- section icon -->
   Name of section
  
  <!-- arrow right and arrow down -->
  <svg class="text-gray-300 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150" viewBox="0 0 20 20" aria-hidden="true" data     -action='toggle#toggle' data-toggle-target='toggleable'>
   <path d="M6 6L14 10L6 14V6Z" fill="currentColor" />
  </svg>
  <svg class="hidden ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150 text-gray-400 rotate-90" viewBox="0 0 20 20" aria-h     idden="true" data-toggle-target='toggleable'>
  <path d="M6 6L14 10L6 14V6Z" fill="currentColor"></path>
  </svg>

  <!-- links subsection -->
  <div class="space-y-1 hidden" id="sub-menu-1" data-toggle-target='toggleable'>
    <%= link_to url, class: "hover:text-gray-900 hover:bg-gray-50" %>
  </div>
</div>