Multiple instances of Connected Toggles

[cheerfuloriole]

a11y-toggle is wonderful. Thank you!

When adding multiple instances of connected-toggles to a single page toggling content becomes a problem. In the following codepen demo notice how toggling one item hides images from the other galleries.

I was able to get it working by updating the collapseAll function to...
(Note: I used jQuery to solve the problem.)

function collapseAll(event) {

    var $this = jQuery(this);
    var $container = $this.closest('.connected-toggles');
    var $buttons = $container.find('button');
    var buttonsArr = jQuery.makeArray($buttons);

    buttonsArr
        .filter(function(toggle) {
            return buttonsArr !== event.target;
        })
        .forEach(collapse);

    // toggles
    //   .filter(function (toggle) {
    //     return toggle !== event.target;
    //   })
    //   .forEach(collapse);
}

Go to the following codepen demo for a working example. I assume others would prefer a vanilla JS solution.

Hope this helps in some fashion.

Enjoy,
Aaron

[KittyGiraudel]

Hey there,

Thank you for raising this issue. It turns out it comes from the fact that the collapseAll function is not scoping the toggles to a specific container. You can fix it by updating this function like so:

function collapseAll (event) {
  var target = event.target;
  var container = target.closest('.connected-toggles');
  var toggles = container.querySelectorAll('[data-a11y-toggle]');

  Array.prototype.slice.call(toggles)
    .filter(function (toggle) {
      return toggle !== target;
    })
    .forEach(collapse);
}

Best. :)