<div>
    <check-to-toggle target="#foo">
        <div class="form-check">
            <label class="form-check__label">
                <input type="checkbox" class="form-check__input check-to-toggle__checkbox">Toggle</label>
        </div>
    </check-to-toggle>
    <div id="foo">I can be toggled</div>
</div>
<div>
    <check-to-toggle target="#foo">
        <div class="form-check">
            <label class="form-check__label">
                <input type="checkbox" class="form-check__input check-to-toggle__checkbox" />
                Toggle
            </label>
        </div>
    </check-to-toggle>
    <div id="foo">I can be toggled</div>
</div>
/* No context defined for this component. */
  • Content:
    export default class CheckToToggle extends HTMLElement {
      connectedCallback () {
        this.checkbox.onclick = this.toggle.bind(this)
      }
    
      get checkbox () {
        return this.querySelector('.check-to-toggle__checkbox')
      }
    
      get target () {
        const selector = this.getAttribute('target')
        return document.querySelector(selector)
      }
    
      toggle () {
        if (this.checkbox.checked) {
          this.target.classList.add('hidden')
        } else {
          this.target.classList.remove('hidden')
        }
      }
    }
    
  • URL: /components/raw/check-to-toggle/check-to-toggle.js
  • Filesystem Path: components/01-atoms/togglers/check-to-toggle/check-to-toggle.js
  • Size: 498 Bytes
  • Handle: @check-to-toggle
  • Preview:
  • Filesystem Path: components/01-atoms/togglers/check-to-toggle/check-to-toggle.html

There are no notes for this item.