<div class="checkbox-content">
<div class="checkbox-content__checkbox">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" value="1" id="checkbox-21c9" name="checkbox-21c9"/><span class="checkbox__indicator"></span><span class="checkbox__label">Ich möchte Familienangehörige kostenlos mitversichern</span>
</label>
</div>
<div class="checkbox-content__body" aria-hidden="true">
<div class="form-group">
<label class="label" for="form-group-select">Wie viele Familienangehörige möchten Sie kostenlos mitversichern?</label>
<div class="form-group__inner">
<select class="select" id="form-group-select" name="form-group-select">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="Option 1 value" id="option1Id">Option 1</option>
<option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
<option value="Option 3 value" id="option3Id">Option 3</option>
</select>
</div>
</div>
</div>
</div>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Render checkbox with content
.checkbox-content&attributes(attr)
//- Checkbox
if text
.checkbox-content__checkbox
!= include('@checkbox', {text})
//- Content
if use
.checkbox-content__body(aria-hidden='true')
!= include(`@${use}`, settings)
{
"text": "Ich möchte Familienangehörige kostenlos mitversichern",
"use": "form-group--select",
"settings": {
"label": "Wie viele Familienangehörige möchten Sie kostenlos mitversichern?"
}
}
class CheckboxContent {
constructor($el) {
this.$el = $el;
this.$input = this.$el.querySelector('.checkbox__input');
this.$content = this.$el.querySelector('.checkbox-content__body');
this.init();
}
init() {
this.$input.addEventListener('change', () => {
if (this.$input.checked) this.showContent();
else this.hideContent();
});
}
showContent() {
this.$content.setAttribute('aria-hidden', 'false');
}
hideContent() {
this.$content.setAttribute('aria-hidden', 'true');
}
}
// Initialize checkbox
document
.querySelectorAll('.checkbox-content')
.forEach($el => new CheckboxContent($el));
.checkbox-content__body {
display: none;
margin-top: 2rem;
padding-left: 3rem;
&[aria-hidden='false'] {
display: block;
}
}
There are no notes for this item.