HTML-Prototype von Hochschule RheinMain

List View Filter

Toggle example guides Toggle HTML markup

Note that the javascript that toggles the open/closed state of the filter legends in the mobile view is only loaded for the integrated plugin.

<insert-markup>4.6.3-</insert-markup>
Abschlussarten
Themenschwerpunkte
Markup: templates/output/06-components/studyfinder/studyfinder-filter.html

<form class="c-filter c-filter--studyfinder u-in2studyfinder-hide-if-no-js js-in2studyfinder-filter" name="in2studyfinder-filter" action="" method="">
  <button class="c-filter__title" type="button">Filter</button>
  <div class="c-filter__content">
    <button class="c-filter__reset js-in2studyfinder-filter-button-reset" type="button">Filter zurücksetzen</button>
    <div class="js-in2studyfinder-filter-section-container">
      <fieldset class="c-filter__section js-in2studyfinder-filter-section" data-filtergroup="graduation" tabindex="0">
        <legend class="js-in2studyfinder-filter-legend">Abschlussarten</legend>
        <div class="c-filter__options js-in2studyfinder-filter-options">
          <input id="radio-alle" type="radio" value="_alle" checked="checked" disabled="disabled" name="[radio]"/>
          <label class="c-filter__label" for="radio-alle">Alle</label>
          <input id="radio-1" type="radio" value="1" checked="checked" name="[radio]"/>
          <label class="c-filter__label" for="radio-1">Bachelor</label>
          <input id="radio-2" type="radio" value="2" name="[radio]"/>
          <label class="c-filter__label" for="radio-2">Master</label>
          <input id="radio-3" type="radio" value="3" name="[radio]"/>
          <label class="c-filter__label" for="radio-3">Master</label>
        </div>
      </fieldset>
      <fieldset class="c-filter__section js-in2studyfinder-filter-section" data-filtergroup="focusTopic" tabindex="0">
        <legend class="js-in2studyfinder-filter-legend">Themenschwerpunkte</legend>
        <div class="c-filter__options js-in2studyfinder-filter-options">
          <input id="checkbox-alle" type="checkbox" value="_alle"/>
          <label class="c-filter__label" for="checkbox-alle">Alle</label>
          <input id="checkbox-1" type="checkbox" value="1" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-1">Themenschwerpunkt 1</label>
          <input id="checkbox-2" type="checkbox" value="2" checked="checked" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-2">Themenschwerpunkt 2</label>
          <input id="checkbox-3" type="checkbox" value="3" checked="checked" disabled="disabled" name="[checkbox]"/>
          <label class="c-filter__label" for="checkbox-3">Themenschwerpunkt 3</label>
        </div>
      </fieldset>
    </div>
  </div>
</form>
Source: assets/sass/06-components/_components.studyfinder.scss, line 23