<div>
<multi-toggler data-toggle-class="sr-only" data-target-next>Multi-Toggler</multi-toggler>
<p>Consectetur nisi officia sit eu nisi. Deserunt occaecat in sunt ullamco culpa est in consectetur laboris anim culpa duis. Occaecat ullamco pariatur mollit enim laboris duis. Qui laborum sunt adipisicing aliqua consequat voluptate fugiat commodo eiusmod
voluptate.</p>
</div>
<div>
<multi-toggler data-toggle-class="sr-only" data-target-next>
Multi-Toggler
</multi-toggler>
<p>
Consectetur nisi officia sit eu nisi. Deserunt occaecat in sunt ullamco culpa est in consectetur laboris anim culpa duis. Occaecat ullamco pariatur mollit enim laboris duis. Qui laborum sunt adipisicing aliqua consequat voluptate fugiat commodo eiusmod voluptate.
</p>
</div>
/* No context defined for this component. */
export default class MultiToggler extends HTMLElement {
connectedCallback () {
let targetSelector = this.getAttribute('data-target')
let hasNextElementSiblingTarget = this.hasAttribute('data-target-next')
this.toggleClass = this.getAttribute('data-toggle-class')
let initClass = this.getAttribute('data-init-class')
let toggleOnInit = this.hasAttribute('data-toggle-on-init')
this.toggleSelfClass = this.getAttribute('data-toggle-self-class')
let initSelfClass = this.getAttribute('data-init-self-class')
this.targetElements = []
if (targetSelector) {
this.targetElements.push(Array.from(document.querySelectorAll(targetSelector)))
}
if (hasNextElementSiblingTarget) {
this.targetElements.push(this.nextElementSibling)
}
if (toggleOnInit) {
this.toggle()
}
if (initClass) {
this.toggleTargets(initClass)
}
if (initSelfClass) {
this.classList.add(initSelfClass)
}
this.onclick = this.toggle.bind(this)
}
toggle () {
this.toggleTargets(this.toggleClass)
}
toggleTargets (className) {
if (this.targetElements[0]) {
this.targetElements.forEach(
target => target.classList.toggle(className)
)
this.toggleSelf()
}
}
toggleSelf () {
if (this.toggleSelfClass) {
this.classList.toggle(this.toggleSelfClass)
}
}
}
Toggles a class on elements.
Expects arguments:
data-target
: Selector for Elements which shall be toggled upondata-target-next
: Add next sibling element to targetsdata-toggle-class
: the className which shall be toggled on targetsdata-toggle-on-init
: Toggle targets on initdata-init-class
: add this class initially to targets
data-toggle-self-class
: the className which shall be toggled on the toggler itself
data-init-self-class
: a className this toggler should get on itself on initExample:
<multi-toggler data-target=".one-thing, .other-thing" data-toggle-class="toggled">
</multi-toggler>