Filter

Open this example in a new tab: filter

<!-- should go to #filter-options if filters blank -->  
<form action="#filter-list">  
  <button class="asp-button asp-button--toggle asp-button--toggleable asp-js-toggle-button" type="button" aria-expanded="false" data-toggle-element=".asp-toggle-content" style="display:none">  
    <span class="asp-button--toggle__function">Filter options</span>  
    <span aria-hidden="true">  
      <span class="asp-button--toggleable__chevron asp-button--toggleable__text--hide">Hide </span>  
      <span class="asp-button--toggleable__chevron asp-button--toggleable__text--show">Show </span>  
    </span>  
  </button>  
  <div class="asp-toggle-content">  
    <noscript>  
      <h2>Filter by:</h2>  
    </noscript>  
    <div class="asp-table__order-by form__group">  
      <label class="form__label" for="incidentType-select">Incident type:</label>  
      <select class="form__input" id="incidentType-select" name="incidentType">  
        <option value="select">Filter by incident type</option>  
        <option value="value-1">Public Order</option>  
        <option value="value-2">Concern for welfare</option>  
        <option value="value-3">Theft from vehicle</option>  
      </select>  
    </div>  
    <fieldset class="form__group">  
      <legend class="form__label">Source (select all that apply)</legend>  
      <div class="form__item--choices">  
        <input class="form__input-choices form__input-choices--checkbox" id="source-value-1" type="checkbox" name="source" value="value-1">  
        <label class="form__label-choices" for="source-value-1">999</label>  
      </div>  
      <div class="form__item--choices">  
        <input class="form__input-choices form__input-choices--checkbox" id="source-value-2" type="checkbox" name="source" value="value-2">  
        <label class="form__label-choices" for="source-value-2">101</label>  
      </div>  
      <div class="form__item--choices">  
        <input class="form__input-choices form__input-choices--checkbox" id="source-value-3" type="checkbox" name="source" value="value-3">  
        <label class="form__label-choices" for="source-value-3">callback</label>  
      </div>  
    </fieldset>  
    <div class="asp-grid asp-button-container">  
      <!-- should go to #filter-options if filters blank -->  
      <button class="asp-grid__item asp-grid__item--auto asp-button asp-button--start" type="submit">Apply filters</button>  
      <!-- should go to #filter-options -->  
      <button class="asp-grid__item asp-grid__item--auto asp-button asp-button--secondary" type="reset">Reset filters</button>  
    </div>  
  </div>  
</form>