Having nested elements with the same controller

Question

So i have this case, where i have a list that is hidden by default, and when you click a button it toggles the visibility.

this is my controller

import { Controller } from "stimulus";

export default class extends Controller {
    static targets = ["collapsible", "information"]

    toggle() {
        this.element.classList.toggle("collapsible__open");
    }

    connect() {
        this.ensureCollapsibleHidden();
        super.connect();
    }

    ensureCollapsibleHidden() {
        this.element.classList.remove("collapsible__open");
        this.collapsibleTarget.classList.add("collapsible");
    }
}

this works perfectly fine.

But, inside the collapsible list i have other collapsible items.

this is what i want to achieve

this is the code


    header[
    class="w-full flex justify-end items-center relative"
    data-controller="collapse"
    ]

      button[
      data-action="click->collapse#toggle"
      ]
      | show 
      div[class="collapsible "]
        header
          h1[class="text-md" style="color: #8D95B6" ]
            = t 'informational.actions'
        ul[class="my-2 text-sm space-y-3 flex flex-col"]
          li[
          class="flex w-full justify-between items-center text-black"
          data-controller="collapse"
          data-action="mouseover->collapse#toggle mouseout->collapse#toggle" <------------ this mess stuff up
          ]
            = t 'inbox.snooze'
            svg class="w-4 h-4" fill="none" stroke="currentColor" viewbox=("0 0 24 24") xmlns="http://www.w3.org/2000/svg"
              path d=("M9 5l7 7-7 7") stroke-linecap="round" stroke-linejoin="round" stroke-width="2"


           Inner collapsible component
            ul[
            class="collapsible"
            style="right: -9.7rem"
            ]
              li[class="block px-4 py-1"]
                | 1 Hour
              li[class="block px-4 py-1"]
                | 4 Hours

with the current implementation, both collapsibles show when i click on show

score -1 · Answer 1 · answered Mar 20 '21 at 20:23

I'm assuming you want a first click to show the first menu and then a second click to show the sub-menu?

If so, you'll want to add a data element like aria-expanded to the first menu and then set it to true when it's first expanded. Then use that as a condition in your stimulus controller to set the visibility of the second sub-menu to true only when the first one has aria-expanded set to true and you detect a click.

Having nested elements with the same controller

1 Answers1