Multi Toggler 

<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>
 
<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>
 
/* No context defined. */
  • Content: 
    export default class MultiToggler extends HTMLElement {
  connectedCallback() {
    const targetSelector = this.getAttribute('data-target')
    const hasNextElementSiblingTarget = this.hasAttribute('data-target-next')
    this.toggleClass = this.getAttribute('data-toggle-class')
    const initClass = this.getAttribute('data-init-class')
    const toggleOnInit = this.hasAttribute('data-toggle-on-init')
    this.toggleSelfClass = this.getAttribute('data-toggle-self-class')
    const 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)
    }
  }
}
  • URL: /components/raw/multi-toggler/multi-toggler.js
  • Filesystem Path: components/05-atoms/togglers/multi-toggler/multi-toggler.js
  • Size: 1.4 KB
  • Handle: @multi-toggler
  • Preview:
  • Filesystem Path: components/05-atoms/togglers/multi-toggler/multi-toggler.html

Toggles a class on elements.

Expects arguments:

  • data-target: Selector for Elements which shall be toggled upon

  • data-target-next: Add next sibling element to targets

  • data-toggle-class: the className which shall be toggled on targets

  • data-toggle-on-init: Toggle targets on init

  • data-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 init

Example:

<multi-toggler data-target=".one-thing, .other-thing" data-toggle-class="toggled">
</multi-toggler>