<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. */
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')
}
}
}
There are no notes for this item.