<fieldset class="radio-content">
<legend class="radio-content__legend">Haben Sie in den letzten 18 Monaten Ihren Arbeitgeber gewechselt?*</legend>
<div class="radio-content__checkboxes">
<div class="radio-content__checkbox">
<label class="radio">
<input class="radio__input radio-content__toggle--show" type="radio" value="1" required="required" name="radio-content-group" id="radio-d888"/><span class="radio__indicator"></span><span class="radio__label">Ja</span>
</label>
</div>
<div class="radio-content__checkbox">
<label class="radio">
<input class="radio__input radio-content__toggle--hide" type="radio" value="1" required="required" name="radio-content-group" id="radio-dd81"/><span class="radio__indicator"></span><span class="radio__label">Nein</span>
</label>
</div>
</div>
<div class="radio-content__content" aria-hidden="true">
<div class="radio-content__body">
<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>
</fieldset>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Render radio with content
fieldset.radio-content&attributes(attr)
//- Legend
if legend
legend.radio-content__legend #{legend}
//- Checkboxes
if items
.radio-content__checkboxes
each item in items
.radio-content__checkbox
!= include('@radio', { text: item.text, required, attr: { name: item.name, class: item.show && 'radio-content__toggle--show' || !item.show && 'radio-content__toggle--hide' }})
//- Content
if content
.radio-content__content(aria-hidden='true')
each contentItem in content
if contentItem.use
.radio-content__body
!= include(`@${contentItem.use}`, contentItem.settings)
{
"legend": "Haben Sie in den letzten 18 Monaten Ihren Arbeitgeber gewechselt?*",
"required": true,
"items": [
{
"text": "Ja",
"name": "radio-content-group",
"show": true
},
{
"text": "Nein",
"name": "radio-content-group"
}
],
"content": [
{
"use": "form-group--select",
"settings": {
"label": "Wie viele Familienangehörige möchten Sie kostenlos mitversichern?"
}
}
]
}
class RadioContent {
constructor($el) {
this.$el = $el;
this.$inputShow = this.$el.querySelector('.radio-content__toggle--show');
this.$inputHide = this.$el.querySelector('.radio-content__toggle--hide');
this.$content = this.$el.querySelector('.radio-content__content');
this.init();
}
init() {
this.$inputShow.addEventListener('change', () => {
if (this.$inputShow.checked) this.showContent();
else this.hideContent();
});
this.$inputHide.addEventListener('change', () => {
if (this.$inputHide.checked) this.hideContent();
});
}
showContent() {
this.$content.setAttribute('aria-hidden', 'false');
}
hideContent() {
this.$content.setAttribute('aria-hidden', 'true');
}
}
// Initialize radio
document
.querySelectorAll('.radio-content')
.forEach($el => new RadioContent($el));
.radio-content {
border: 0;
padding: 0;
}
.radio-content__legend {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.radio-content__checkbox:not(:last-child) {
margin-bottom: 1.5rem;
}
.radio-content__content {
display: none;
margin-top: 2rem;
padding-left: 3rem;
&[aria-hidden='false'] {
display: block;
}
}
There are no notes for this item.