<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. */
  • Content:
    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)
        }
      }
    }
    
  • URL: /components/raw/multi-toggler/multi-toggler.js
  • Filesystem Path: components/01-atoms/togglers/multi-toggler/multi-toggler.js
  • Size: 1.4 KB
  • Handle: @multi-toggler
  • Preview:
  • Filesystem Path: components/01-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>