# Check To Toggle

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/togglers/check-to-toggle/check-to-toggle.html

No notes defined.