<div class="checkbox-content">
    <div class="checkbox-content__checkbox">
        <label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" id="checkbox-0603" name="checkbox-0603"/><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?"
  }
}
  • Content:
    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));
    
  • URL: /components/raw/checkbox-content/checkbox-content.js
  • Filesystem Path: src/components/molecules/checkbox-content/checkbox-content.js
  • Size: 655 Bytes
  • Content:
    .checkbox-content__body {
      display: none;
      margin-top: 2rem;
      padding-left: 3rem;
    
      &[aria-hidden='false'] {
        display: block;
      }
    }
    
  • URL: /components/raw/checkbox-content/checkbox-content.scss
  • Filesystem Path: src/components/molecules/checkbox-content/checkbox-content.scss
  • Size: 139 Bytes

There are no notes for this item.