Closed aaronkahlhamer closed 7 years ago
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. :)
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.)
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