<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. */
  • Content:
    export default class CheckToToggle extends HTMLElement {
      connectedCallback() {
        this.checkbox.onclick = this.toggle.bind(this)
      }
    
      get checkbox() {
        return this.querySelector('input[type="checkbox"]')
      }
    
      get target() {
        const selector = this.getAttribute('target')
        return document.querySelector(selector)
      }
    
      toggle() {
        this.target.classList.toggle('is-hidden')
      }
    }
    
  • URL: /components/raw/check-to-toggle/check-to-toggle.js
  • Filesystem Path: components/05-atoms/togglers/check-to-toggle/check-to-toggle.js
  • Size: 397 Bytes
  • Handle: @check-to-toggle
  • Preview:
  • Filesystem Path: components/05-atoms/togglers/check-to-toggle/check-to-toggle.html

No notes defined.