Toogle All?

[jasper502]

I have a page with multiple toggleable divs (i.e. wrapper div calling the controller and a toggleable target inside each.

I want to have an accordion effect where the open ones close when you click to open another. Anyone done this? Thoughts on implementing this or just write a new controller from scratch?

[excid3]

PR is welcome if the controller needs to be extended to support animations. 👍

[jasper502]

To clarify - not animation (which also would be cool) but like the Bootstrap accordion:

https://getbootstrap.com/docs/5.0/components/accordion/

[excid3]

The <detail> html element does that in the browser, but it doesn't have any animations like Bootstrap does. You wouldn't need the Toggle controller for it, but we would want to have one for addition animations or whatever so the open and close grows. That might be able to be done entirely with CSS and no JS though. I am not sure.

[jasper502]

My initial thought was to just set all the data-toggle-disclose-open-value values to false in the toggle method before calling the super. Adding animations would be a nice too have.

<details> seems to only support a single element.

[jasper502]

General Stimulus Question: As described above I have multiple <div data-controller="toggle" data-toggle-open-value="false" ></div> on my page. Each one calls the controller individually so the targets are limited in scope inside that div. Can you somehow call the close() method on all the divs?

[jasper502]

Here is how I extended this:

  toggle() {

   // added this as the closeall() will obviously try and close the existing open on if you are trying to toggle that one

    if (!this.openValue) {
      this.closeall();
    }

   // I added these to toggle my font awesome disclose carets

    this.iconTargets.forEach(target => {
      target.classList.toggle("fa-caret-right")
      target.classList.toggle("fa-caret-down")
    })
    super.toggle(event);

  }

  closeall() {

    // there should only be one open at a given time but I wanted to make sure so made this querySelectorAll

    let opened = document.querySelectorAll("[data-toggle-disclose-open-value='true']");

      opened.forEach(open => {
        open.querySelector("i").classList.toggle("fa-caret-right")
        open.querySelector("i").classList.toggle("fa-caret-down")
        open.dataset.toggleDiscloseOpenValue = false;
      });

  }

Next is the animation which I am still working on.