<section class="panel
panel--compact
panel--no-padding-top ">
<div class="panel__inner">
<div class="product-filters js-filters">
<div class="product-filters__top-panel">
<div class="product-filters__btn-row">
<div class="product-filters__open-button">
<button class="menu-button">
<span class="menu-button__label">Filtrera</span>
<span class="menu-button__icon"></span>
</button>
</div>
</div>
<div class="row">
<div class="col col--span-12 col--span-l-6">
<ul class="chips-list">
<li class="tag-blueprint">
<button type="button" class="chips ">
<span class="chips__text">
Grupprum
</span>
<span class="chips__icon">
<svg class="icon " focusable="false">
<use xlink:href="#icon-plus"></use>
</svg>
</span>
</button>
</li>
</ul>
<a href="#" class="reset-filters-button js-clear-filters">Reset button</a>
</div>
<div class="col col--span-12 col--span-l-6">
<div class="product-filters__sort-info">
<div class="row row--justify-end-l row--justify-between row--align-center">
<div class="col col--auto-width col--gutter-right-large-l">
<p class="search-result-count">Visar 5 av 1000 träffar.</p>
</div>
<div class="col col--auto-width">
<div class="form-item form-item--select form-item--horizontal">
<label for="productSelectSort" class="form-item__label">
Sortera:
</label>
<select id="productSelectSort" class="select__select js-filter select__select--ghost" name="Sort" aria-controls="filter-products-grid" data-type="select">
<option class="select__option" value="A-Z">A-Z</option>
<option class="select__option" value="Z-A">Z-A</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col--span-12 col--span-l-3 col--no-gutter">
<div class="product-filters__sidebar">
<div class="product-filters__sidebar-top-bar">
<div class="product-filters__close-button">
<button class="menu-button">
<span class="menu-button__icon"></span>
<span class="menu-button__label">Stäng</span>
</button>
</div>
</div>
<div class="filters-accordion-list js-product-filters">
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum-dolor" aria-expanded="false">
Lokaltyp
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum-dolor" aria-hidden="true" aria-labelledby="lorem-ipsum-dolor">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Aula">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Aula" value="Aula" aria-controls="filter-products-grid" data-type="checkbox" data-text="Aula Aula">
<span class="checkbox__title">Aula</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Biograf">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Biograf" value="Biograf" aria-controls="filter-products-grid" data-type="checkbox" data-text="Biograf Biograf">
<span class="checkbox__title">Biograf</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Butik">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Butik" value="Butik" aria-controls="filter-products-grid" data-type="checkbox" data-text="Butik">
<span class="checkbox__title">Butik</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Grupprum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Grupprum" value="Grupprum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Grupprum">
<span class="checkbox__title">Grupprum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Gym">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Gym" value="Gym" aria-controls="filter-products-grid" data-type="checkbox" data-text="Gym">
<span class="checkbox__title">Gym</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Hotellrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Hotellrum" value="Hotellrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Hotellrum">
<span class="checkbox__title">Hotellrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Receptionfoaje">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Receptionfoaje" value="Receptionfoaje" aria-controls="filter-products-grid" data-type="checkbox" data-text="Receptionfoaje">
<span class="checkbox__title">Receptionfoaje</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Isolerrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Isolerrum" value="Isolerrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Isolerrum">
<span class="checkbox__title">Isolerrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Klassrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Klassrum" value="Klassrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Klassrum">
<span class="checkbox__title">Klassrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Konferensrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Konferensrum" value="Konferensrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Konferensrum">
<span class="checkbox__title">Konferensrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontor">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontor" value="Kontor" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontor">
<span class="checkbox__title">Kontor</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontorslandskap">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontorslandskap" value="Kontorslandskap" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontorslandskap">
<span class="checkbox__title">Kontorslandskap</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Lager">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Lager" value="Lager" aria-controls="filter-products-grid" data-type="checkbox" data-text="Lager">
<span class="checkbox__title">Lager</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Matsal">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Matsal" value="Matsal" aria-controls="filter-products-grid" data-type="checkbox" data-text="Matsal">
<span class="checkbox__title">Matsal</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Lokaltyp
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Aula">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Aula" value="Aula" aria-controls="filter-products-grid" data-type="checkbox" data-text="Aula Aula">
<span class="checkbox__title">Aula</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Biograf">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Biograf" value="Biograf" aria-controls="filter-products-grid" data-type="checkbox" data-text="Biograf Biograf">
<span class="checkbox__title">Biograf</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Butik">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Butik" value="Butik" aria-controls="filter-products-grid" data-type="checkbox" data-text="Butik">
<span class="checkbox__title">Butik</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Grupprum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Grupprum" value="Grupprum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Grupprum">
<span class="checkbox__title">Grupprum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Gym">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Gym" value="Gym" aria-controls="filter-products-grid" data-type="checkbox" data-text="Gym">
<span class="checkbox__title">Gym</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Hotellrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Hotellrum" value="Hotellrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Hotellrum">
<span class="checkbox__title">Hotellrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Receptionfoaje">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Receptionfoaje" value="Receptionfoaje" aria-controls="filter-products-grid" data-type="checkbox" data-text="Receptionfoaje">
<span class="checkbox__title">Receptionfoaje</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Isolerrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Isolerrum" value="Isolerrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Isolerrum">
<span class="checkbox__title">Isolerrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Klassrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Klassrum" value="Klassrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Klassrum">
<span class="checkbox__title">Klassrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Konferensrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Konferensrum" value="Konferensrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Konferensrum">
<span class="checkbox__title">Konferensrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontor">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontor" value="Kontor" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontor">
<span class="checkbox__title">Kontor</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontorslandskap">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontorslandskap" value="Kontorslandskap" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontorslandskap">
<span class="checkbox__title">Kontorslandskap</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Lager">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Lager" value="Lager" aria-controls="filter-products-grid" data-type="checkbox" data-text="Lager">
<span class="checkbox__title">Lager</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Matsal">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Matsal" value="Matsal" aria-controls="filter-products-grid" data-type="checkbox" data-text="Matsal">
<span class="checkbox__title">Matsal</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Lokaltyp
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Aula">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Aula" value="Aula" aria-controls="filter-products-grid" data-type="checkbox" data-text="Aula Aula">
<span class="checkbox__title">Aula</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Biograf">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Biograf" value="Biograf" aria-controls="filter-products-grid" data-type="checkbox" data-text="Biograf Biograf">
<span class="checkbox__title">Biograf</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Butik">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Butik" value="Butik" aria-controls="filter-products-grid" data-type="checkbox" data-text="Butik">
<span class="checkbox__title">Butik</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Grupprum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Grupprum" value="Grupprum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Grupprum">
<span class="checkbox__title">Grupprum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Gym">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Gym" value="Gym" aria-controls="filter-products-grid" data-type="checkbox" data-text="Gym">
<span class="checkbox__title">Gym</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Hotellrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Hotellrum" value="Hotellrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Hotellrum">
<span class="checkbox__title">Hotellrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Receptionfoaje">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Receptionfoaje" value="Receptionfoaje" aria-controls="filter-products-grid" data-type="checkbox" data-text="Receptionfoaje">
<span class="checkbox__title">Receptionfoaje</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Isolerrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Isolerrum" value="Isolerrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Isolerrum">
<span class="checkbox__title">Isolerrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Klassrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Klassrum" value="Klassrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Klassrum">
<span class="checkbox__title">Klassrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Konferensrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Konferensrum" value="Konferensrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Konferensrum">
<span class="checkbox__title">Konferensrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontor">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontor" value="Kontor" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontor">
<span class="checkbox__title">Kontor</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontorslandskap">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontorslandskap" value="Kontorslandskap" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontorslandskap">
<span class="checkbox__title">Kontorslandskap</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Lager">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Lager" value="Lager" aria-controls="filter-products-grid" data-type="checkbox" data-text="Lager">
<span class="checkbox__title">Lager</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Matsal">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Matsal" value="Matsal" aria-controls="filter-products-grid" data-type="checkbox" data-text="Matsal">
<span class="checkbox__title">Matsal</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Lokaltyp
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Aula">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Aula" value="Aula" aria-controls="filter-products-grid" data-type="checkbox" data-text="Aula Aula">
<span class="checkbox__title">Aula</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Biograf">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Biograf" value="Biograf" aria-controls="filter-products-grid" data-type="checkbox" data-text="Biograf Biograf">
<span class="checkbox__title">Biograf</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Butik">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Butik" value="Butik" aria-controls="filter-products-grid" data-type="checkbox" data-text="Butik">
<span class="checkbox__title">Butik</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Grupprum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Grupprum" value="Grupprum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Grupprum">
<span class="checkbox__title">Grupprum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Gym">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Gym" value="Gym" aria-controls="filter-products-grid" data-type="checkbox" data-text="Gym">
<span class="checkbox__title">Gym</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Hotellrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Hotellrum" value="Hotellrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Hotellrum">
<span class="checkbox__title">Hotellrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Receptionfoaje">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Receptionfoaje" value="Receptionfoaje" aria-controls="filter-products-grid" data-type="checkbox" data-text="Receptionfoaje">
<span class="checkbox__title">Receptionfoaje</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Isolerrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Isolerrum" value="Isolerrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Isolerrum">
<span class="checkbox__title">Isolerrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Klassrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Klassrum" value="Klassrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Klassrum">
<span class="checkbox__title">Klassrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Konferensrum">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Konferensrum" value="Konferensrum" aria-controls="filter-products-grid" data-type="checkbox" data-text="Konferensrum">
<span class="checkbox__title">Konferensrum</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontor">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontor" value="Kontor" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontor">
<span class="checkbox__title">Kontor</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Kontorslandskap">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Kontorslandskap" value="Kontorslandskap" aria-controls="filter-products-grid" data-type="checkbox" data-text="Kontorslandskap">
<span class="checkbox__title">Kontorslandskap</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Lager">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Lager" value="Lager" aria-controls="filter-products-grid" data-type="checkbox" data-text="Lager">
<span class="checkbox__title">Lager</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Matsal">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Lokaltyp]" id="Matsal" value="Matsal" aria-controls="filter-products-grid" data-type="checkbox" data-text="Matsal">
<span class="checkbox__title">Matsal</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum" aria-expanded="false">
Inneklimat
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum" aria-hidden="true" aria-labelledby="lorem-ipsum">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox1">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox1" value="Checkbox1" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox1">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox2">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox2" value="Checkbox2" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox2">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox3">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox3" value="Checkbox3" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox3">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 4</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 5</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 6</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 7</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 8</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 9</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 10</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 11</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Inneklimat
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox1">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox1" value="Checkbox1" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox1">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox2">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox2" value="Checkbox2" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox2">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox3">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox3" value="Checkbox3" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox3">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 4</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 5</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 6</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 7</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 8</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 9</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 10</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 11</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Inneklimat
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox1">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox1" value="Checkbox1" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox1">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox2">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox2" value="Checkbox2" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox2">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox3">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox3" value="Checkbox3" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox3">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 4</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 5</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 6</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 7</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 8</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 9</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 10</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 11</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Inneklimat
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox1">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox1" value="Checkbox1" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox1">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox2">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox2" value="Checkbox2" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox2">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox3">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox3" value="Checkbox3" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox3">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 4</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 5</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 6</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 7</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 8</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 9</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 10</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Inneklimat]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 11</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum2" aria-expanded="false">
Ventilationssystem
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum2" aria-hidden="true" aria-labelledby="lorem-ipsum2">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Ventilationssystem
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Ventilationssystem
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Ventilationssystem
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox4">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox4" value="Checkbox4" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox4">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox5">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox5" value="Checkbox5" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox5">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox6">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationssystem]" id="Checkbox6" value="Checkbox6" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox6">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum22" aria-expanded="false">
Ventilationsprincip
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum22" aria-hidden="true" aria-labelledby="lorem-ipsum22">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Ventilationsprincip
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Ventilationsprincip
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Ventilationsprincip
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox7">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox7" value="Checkbox7" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox7">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox8">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox8" value="Checkbox8" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox8">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox9">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ventilationsprincip]" id="Checkbox9" value="Checkbox9" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox9">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum233" aria-expanded="false">
Placering
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum233" aria-hidden="true" aria-labelledby="lorem-ipsum233">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox12">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox12" value="Checkbox12" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox12">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Placering
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox12">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox12" value="Checkbox12" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox12">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Placering
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox12">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox12" value="Checkbox12" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox12">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Placering
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox10">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox10" value="Checkbox10" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox10">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox11">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox11" value="Checkbox11" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox11">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox12">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Placering]" id="Checkbox12" value="Checkbox12" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox12">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum2334" aria-expanded="false">
Ställbar spridning
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum2334" aria-hidden="true" aria-labelledby="lorem-ipsum2334">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox13">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox13" value="Checkbox13" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox13">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox14">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox14" value="Checkbox14" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox14">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox15">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox15" value="Checkbox15" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox15">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Ställbar spridning
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox13">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox13" value="Checkbox13" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox13">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox14">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox14" value="Checkbox14" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox14">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox15">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox15" value="Checkbox15" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox15">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Ställbar spridning
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox13">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox13" value="Checkbox13" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox13">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox14">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox14" value="Checkbox14" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox14">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox15">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox15" value="Checkbox15" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox15">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Ställbar spridning
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox13">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox13" value="Checkbox13" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox13">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox14">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox14" value="Checkbox14" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox14">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox15">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Ställbar spridning]" id="Checkbox15" value="Checkbox15" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox15">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum23345" aria-expanded="false">
Bedömningar
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum23345" aria-hidden="true" aria-labelledby="lorem-ipsum23345">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox16">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox16" value="Checkbox16" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox16">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox17">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox17" value="Checkbox17" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox17">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox18">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox18" value="Checkbox18" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox18">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Bedömningar
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox16">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox16" value="Checkbox16" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox16">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox17">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox17" value="Checkbox17" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox17">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox18">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox18" value="Checkbox18" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox18">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Bedömningar
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox16">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox16" value="Checkbox16" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox16">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox17">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox17" value="Checkbox17" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox17">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox18">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox18" value="Checkbox18" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox18">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Bedömningar
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="filter-checkbox-list js-options-limiter">
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox16">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox16" value="Checkbox16" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox16">
<span class="checkbox__title">Checkbox 1</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox17">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox17" value="Checkbox17" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox17">
<span class="checkbox__title">Checkbox 2</span>
</label>
</div>
</div>
</div>
<div class="filter-checkbox-list__item">
<div class="form-item">
<div class="checkbox__item checkbox__item--simple">
<label class="checkbox__label js-filter" for="Checkbox18">
<input class="checkbox__input js-filter" type="checkbox" name="filters[Bedömningar]" id="Checkbox18" value="Checkbox18" aria-controls="filter-products-grid" data-type="checkbox" data-text="Checkbox18">
<span class="checkbox__title">Checkbox 3</span>
</label>
</div>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-list--large">
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="lorem-ipsum2334533" aria-expanded="false">
Air flow range
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="lorem-ipsum2334533" aria-hidden="true" aria-labelledby="lorem-ipsum2334533">
<div class="range_container js-range-slider js-filter" data-range-slider-id="slider1" data-type="range-slider" data-title="Air flow range" aria-controls="filter-products-grid">
<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
<label for="radio-1" class="switchers__label">
<input id="radio-1" value="radio-1" type="radio" name="radio" class="switchers__input" checked data-type="radio" data-max-beyond="40000" data-step-increments="[10,20,50,100,200,500,1000]" data-steps="[0,70,250,500,2000,5000,15000,50000]">
<span>m/h</span>
</label>
<label for="radio-2" class="switchers__label">
<input id="radio-2" value="radio-2" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="160" data-step-increments="[0.002,0.005,0.015,0.03,0.05,0.1,0.25]" data-steps="[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]">
<span>m/s</span>
</label>
<label for="radio-3" class="switchers__label">
<input id="radio-3" value="radio-3" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="180" data-step-increments="[5,10,10,50,50,100,200]" data-steps="[0,20,70,150,550,1400,4100,13900]">
<span>l/s</span>
</label>
</div>
</div>
<div class="sliders_control">
<input class="input" type="range" />
</div>
<div class="form_control">
<div class="form_control_container">
<output class="form_control_container__time__input input-label"></output>
</div>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="klio" aria-expanded="false">
Air flow range
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="klio" aria-hidden="true" aria-labelledby="klio">
<div class="range_container js-range-slider js-filter" data-range-slider-id="slider1" data-type="range-slider" data-title="Air flow range" aria-controls="filter-products-grid">
<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
<label for="radio-1" class="switchers__label">
<input id="radio-1" value="radio-1" type="radio" name="radio" class="switchers__input" checked data-type="radio" data-max-beyond="40000" data-step-increments="[10,20,50,100,200,500,1000]" data-steps="[0,70,250,500,2000,5000,15000,50000]">
<span>m/h</span>
</label>
<label for="radio-2" class="switchers__label">
<input id="radio-2" value="radio-2" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="160" data-step-increments="[0.002,0.005,0.015,0.03,0.05,0.1,0.25]" data-steps="[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]">
<span>m/s</span>
</label>
<label for="radio-3" class="switchers__label">
<input id="radio-3" value="radio-3" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="180" data-step-increments="[5,10,10,50,50,100,200]" data-steps="[0,20,70,150,550,1400,4100,13900]">
<span>l/s</span>
</label>
</div>
</div>
<div class="sliders_control">
<input class="input" type="range" />
</div>
<div class="form_control">
<div class="form_control_container">
<output class="form_control_container__time__input input-label"></output>
</div>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="eurur" aria-expanded="false">
Air flow range
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="eurur" aria-hidden="true" aria-labelledby="eurur">
<div class="range_container js-range-slider js-filter" data-range-slider-id="slider1" data-type="range-slider" data-title="Air flow range" aria-controls="filter-products-grid">
<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
<label for="radio-1" class="switchers__label">
<input id="radio-1" value="radio-1" type="radio" name="radio" class="switchers__input" checked data-type="radio" data-max-beyond="40000" data-step-increments="[10,20,50,100,200,500,1000]" data-steps="[0,70,250,500,2000,5000,15000,50000]">
<span>m/h</span>
</label>
<label for="radio-2" class="switchers__label">
<input id="radio-2" value="radio-2" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="160" data-step-increments="[0.002,0.005,0.015,0.03,0.05,0.1,0.25]" data-steps="[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]">
<span>m/s</span>
</label>
<label for="radio-3" class="switchers__label">
<input id="radio-3" value="radio-3" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="180" data-step-increments="[5,10,10,50,50,100,200]" data-steps="[0,20,70,150,550,1400,4100,13900]">
<span>l/s</span>
</label>
</div>
</div>
<div class="sliders_control">
<input class="input" type="range" />
</div>
<div class="form_control">
<div class="form_control_container">
<output class="form_control_container__time__input input-label"></output>
</div>
</div>
</div>
</div>
</div>
<div class="accordion accordion--no-animation accordion--with-counter">
<button class="accordion__button" aria-controls="iuhrere" aria-expanded="false">
Air flow range
<div class="accordion__counter">true</div>
<svg class="icon accordion__icon" focusable="false">
<use xlink:href="#icon-chevron-down"></use>
</svg>
</button>
<div class="accordion__content" id="iuhrere" aria-hidden="true" aria-labelledby="iuhrere">
<div class="range_container js-range-slider js-filter" data-range-slider-id="slider1" data-type="range-slider" data-title="Air flow range" aria-controls="filter-products-grid">
<div class="switchers js-switchers">
<div class="switchers__title">Airflow range</div>
<div class="switchers__list">
<label for="radio-1" class="switchers__label">
<input id="radio-1" value="radio-1" type="radio" name="radio" class="switchers__input" checked data-type="radio" data-max-beyond="40000" data-step-increments="[10,20,50,100,200,500,1000]" data-steps="[0,70,250,500,2000,5000,15000,50000]">
<span>m/h</span>
</label>
<label for="radio-2" class="switchers__label">
<input id="radio-2" value="radio-2" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="160" data-step-increments="[0.002,0.005,0.015,0.03,0.05,0.1,0.25]" data-steps="[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]">
<span>m/s</span>
</label>
<label for="radio-3" class="switchers__label">
<input id="radio-3" value="radio-3" type="radio" name="radio" class="switchers__input" data-type="radio" data-max-beyond="180" data-step-increments="[5,10,10,50,50,100,200]" data-steps="[0,20,70,150,550,1400,4100,13900]">
<span>l/s</span>
</label>
</div>
</div>
<div class="sliders_control">
<input class="input" type="range" />
</div>
<div class="form_control">
<div class="form_control_container">
<output class="form_control_container__time__input input-label"></output>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-filters__sidebar-button-holder">
<a href="#" class="button view-products-button ">
Visa produkter
</a>
</div>
</div>
</div>
<div class="col col--span-12 col--span-l-9 col--gutter-xlarge-l col--no-gutter-s-down">
<div class="row" id="filter-products-grid">
<div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4 col--bottom-gutter-large">
<div class="card card--image card--bordered card--product">
<a href="#" class="card__cta">
<figure class="card__figure">
<img src="/mocks/img/product-image-gold-rx-small.jpg" alt="" class="card__image">
</figure>
<div class="card__body">
<h4 class="card__title">
COLIBRI Wall
</h4>
<p class="card__description">Cirkulärt takdon för tilluft - Plan överdel</p>
</div>
</a>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4 col--bottom-gutter-large">
<div class="card card--image card--bordered card--product">
<a href="#" class="card__cta">
<figure class="card__figure">
<img src="/mocks/img/product-image-gold-rx-small.jpg" alt="" class="card__image">
</figure>
<div class="card__body">
<h4 class="card__title">
CRG
</h4>
<p class="card__description">Adapter till systemundertak</p>
</div>
</a>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4 col--bottom-gutter-large">
<div class="card card--image card--bordered card--product">
<a href="#" class="card__cta">
<figure class="card__figure">
<img src="/mocks/img/product-image1.png" alt="" class="card__image">
</figure>
<div class="card__body">
<h4 class="card__title">
Rumsprodukter
</h4>
<p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>
</div>
</a>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4 col--bottom-gutter-large">
<div class="card card--image card--bordered card--product">
<a href="#" class="card__cta">
<figure class="card__figure">
<img src="/mocks/img/product-image1.png" alt="" class="card__image">
</figure>
<div class="card__body">
<h4 class="card__title">
Rumsprodukter 2
</h4>
<p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>
</div>
</a>
</div>
</div>
</div>
<script type="text/template" id="product-data-tmpl"></script>
<div class="h-text-align-center">
<p class="search-result-count"></p>
<button class="button js-load-more " href="/mocks/api/products.json" aria-controls="filter-products-grid" data-template-id="product-data-tmpl">
<span class="button__label">Ladda fler</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
{{#> @panel modifiers="compact,no-padding-top"}}
<div class="product-filters js-filters" {{{getattributes attributes}}}>
<div class="product-filters__top-panel">
<div class="product-filters__btn-row">
<div class="product-filters__open-button">
<button class="menu-button">
<span class="menu-button__label">Filtrera</span>
<span class="menu-button__icon"></span>
</button>
</div>
</div>
<div class="row">
<div class="col col--span-12 col--span-l-6">
<ul class="chips-list">
{{#each tags}}
<li class="tag-blueprint">
{{> @chips this}}
</li>
{{/each}}
</ul>
<a href="#" class="reset-filters-button js-clear-filters">Reset button</a>
</div>
<div class="col col--span-12 col--span-l-6">
<div class="product-filters__sort-info">
<div class="row row--justify-end-l row--justify-between row--align-center">
<div class="col col--auto-width col--gutter-right-large-l">
{{>@search-result-count searchResultCount}}
</div>
<div class="col col--auto-width">
{{#if displaySort}}
{{render "@select--ghost" productFilters.sort merge=true}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col--span-12 col--span-l-3 col--no-gutter">
<div class="product-filters__sidebar">
<div class="product-filters__sidebar-top-bar">
<div class="product-filters__close-button">
<button class="menu-button">
<span class="menu-button__icon"></span>
<span class="menu-button__label">Stäng</span>
</button>
</div>
</div>
<div class="filters-accordion-list js-product-filters">
{{#each accordions}}
{{#switch accordionType}}
{{#case 'localType'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'IndoorClimate'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'VentilationSystem'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'VentilationPrinciple'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'Location'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'AdjustableSpread'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'Assessments'}}
{{#> @accordion }}
<div class="filter-checkbox-list js-options-limiter">
{{#each checkboxes}}
<div class="filter-checkbox-list__item">
{{> @checkbox this }}
</div>
{{/each}}
<div class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</div>
</div>
{{/@accordion}}
{{/case}}
{{#case 'Airflow'}}
{{#> @accordion }}
{{> @range-slider this.rangeSlider }}
{{/@accordion}}
{{/case}}
{{/switch}}
{{/each}}
</div>
<div class="product-filters__sidebar-button-holder">
<a href="#" class="button view-products-button {{#if buttonModifier}}{{buttonModifier}}{{/if}}">
{{cta}}
</a>
</div>
</div>
</div>
<div class="col col--span-12 col--span-l-9 col--gutter-xlarge-l col--no-gutter-s-down">
{{#if products}}
<div class="row" id="{{products.id}}">
{{#each products.items}}
<div class="col col--span-12 col--span-xs-6 col--span-l-6 col--span-xl-4 col--bottom-gutter-large">
{{>@card this}}
</div>
{{/each}}
</div>
{{render "@product-data-tmpl"}}
{{/if}}
<div class="h-text-align-center">
{{#if searchResultCount}}
{{> @search-result-count}}
{{/if}}
{{#if loadMore}}
{{#if loadMore.visuallyHidden}}
{{> @button loadMore additionalClasses="js-load-more h-hidden-from-view"}}
{{else}}
{{> @button loadMore additionalClasses="js-load-more"}}
{{/if}}
{{/if}}
</div>
</div>
</div>
</div>
{{/@panel}}
{
"panel": {
"modifiers": "no-padding-top"
},
"filtersTitle": "Filtrera",
"displayDropdowns": true,
"displaySearch": false,
"resetButton": true,
"displaySort": true,
"cta": "Visa produkter",
"tags": [
{
"label": "Grupprum",
"linkIcon": "plus"
}
],
"searchResultCount": {
"paginationInfo": {
"text": "Visar 5 av 1000 träffar."
}
},
"productFilters": {
"sort": {
"name": "Sort",
"label": "Sortera:",
"modifiers": "horizontal",
"id": "productSelectSort",
"additionalClasses": "js-filter select__select--ghost",
"options": [
{
"name": "A-Z",
"value": "A-Z"
},
{
"name": "Z-A",
"value": "Z-A"
}
],
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "select"
}
}
},
"accordions": [
{
"title": "Lokaltyp",
"id": "lorem-ipsum-dolor",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "localType",
"checkboxes": [
{
"name": "filters[Lokaltyp]",
"label": "Aula",
"value": "Aula",
"type": "checkbox",
"description": "Checkbox description",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Aula Aula"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Biograf",
"value": "Biograf",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Biograf Biograf"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Butik",
"value": "Butik",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Butik"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Grupprum",
"value": "Grupprum",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Grupprum"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Gym",
"value": "Gym",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Gym"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Hotellrum",
"value": "Hotellrum",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Hotellrum"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Receptionfoaje",
"value": "Receptionfoaje",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Receptionfoaje"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Isolerrum",
"value": "Isolerrum",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Isolerrum"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Klassrum",
"value": "Klassrum",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Klassrum"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Konferensrum",
"value": "Konferensrum",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Konferensrum"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Kontor",
"value": "Kontor",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Kontor"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Kontorslandskap",
"value": "Kontorslandskap",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Kontorslandskap"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Lager",
"value": "Lager",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Lager"
}
},
{
"name": "filters[Lokaltyp]",
"label": "Matsal",
"value": "Matsal",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Matsal"
}
}
]
},
{
"title": "Inneklimat",
"id": "lorem-ipsum",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "IndoorClimate",
"checkboxes": [
{
"name": "filters[Inneklimat]",
"label": "Checkbox 1",
"value": "Checkbox1",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox1"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 2",
"value": "Checkbox2",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox2"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 3",
"value": "Checkbox3",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox3"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 4",
"value": "Checkbox4",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox4"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 5",
"value": "Checkbox5",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox5"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 6",
"value": "Checkbox6",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox6"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 7",
"value": "Checkbox7",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox7"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 8",
"value": "Checkbox8",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox8"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 9",
"value": "Checkbox9",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox9"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 10",
"value": "Checkbox10",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox10"
}
},
{
"name": "filters[Inneklimat]",
"label": "Checkbox 11",
"value": "Checkbox11",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox11"
}
}
]
},
{
"title": "Ventilationssystem",
"id": "lorem-ipsum2",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "VentilationSystem",
"checkboxes": [
{
"name": "filters[Ventilationssystem]",
"label": "Checkbox 1",
"value": "Checkbox4",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox4"
}
},
{
"name": "filters[Ventilationssystem]",
"label": "Checkbox 2",
"value": "Checkbox5",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox5"
}
},
{
"name": "filters[Ventilationssystem]",
"label": "Checkbox 3",
"value": "Checkbox6",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox6"
}
}
]
},
{
"title": "Ventilationsprincip",
"id": "lorem-ipsum22",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "VentilationPrinciple",
"checkboxes": [
{
"name": "filters[Ventilationsprincip]",
"label": "Checkbox 1",
"value": "Checkbox7",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox7"
}
},
{
"name": "filters[Ventilationsprincip]",
"label": "Checkbox 2",
"value": "Checkbox8",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox8"
}
},
{
"name": "filters[Ventilationsprincip]",
"label": "Checkbox 3",
"value": "Checkbox9",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox9"
}
}
]
},
{
"title": "Placering",
"id": "lorem-ipsum233",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "Location",
"checkboxes": [
{
"name": "filters[Placering]",
"label": "Checkbox 1",
"value": "Checkbox10",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox10"
}
},
{
"name": "filters[Placering]",
"label": "Checkbox 2",
"value": "Checkbox11",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox11"
}
},
{
"name": "filters[Placering]",
"label": "Checkbox 3",
"value": "Checkbox12",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox12"
}
}
]
},
{
"title": "Ställbar spridning",
"id": "lorem-ipsum2334",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "AdjustableSpread",
"checkboxes": [
{
"name": "filters[Ställbar spridning]",
"label": "Checkbox 1",
"value": "Checkbox13",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox13"
}
},
{
"name": "filters[Ställbar spridning]",
"label": "Checkbox 2",
"value": "Checkbox14",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox14"
}
},
{
"name": "filters[Ställbar spridning]",
"label": "Checkbox 3",
"value": "Checkbox15",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox15"
}
}
]
},
{
"title": "Bedömningar",
"id": "lorem-ipsum23345",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "Assessments",
"checkboxes": [
{
"name": "filters[Bedömningar]",
"label": "Checkbox 1",
"value": "Checkbox16",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox16"
}
},
{
"name": "filters[Bedömningar]",
"label": "Checkbox 2",
"value": "Checkbox17",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox17"
}
},
{
"name": "filters[Bedömningar]",
"label": "Checkbox 3",
"value": "Checkbox18",
"type": "checkbox",
"disabled": false,
"checked": false,
"additionalClasses": "js-filter",
"modifiers": "simple",
"attr": {
"aria-controls": "filter-products-grid",
"data-type": "checkbox",
"data-text": "Checkbox18"
}
}
]
},
{
"title": "Air flow range",
"id": "lorem-ipsum2334533",
"expanded": false,
"modifiers": [
"no-animation",
"with-counter"
],
"counter": true,
"accordionType": "Airflow",
"rangeSlider": {
"attr": {
"data-range-slider-id": "slider1",
"data-type": "range-slider",
"data-title": "Air flow range",
"aria-controls": "filter-products-grid"
},
"radios": [
{
"name": "radio",
"disabled": false,
"checked": true,
"label": "m/h",
"value": "radio-1",
"type": "radio",
"attr": {
"data-type": "radio",
"data-max-beyond": "40000",
"data-step-increments": "[10,20,50,100,200,500,1000]",
"data-steps": "[0,70,250,500,2000,5000,15000,50000]"
}
},
{
"name": "radio",
"disabled": false,
"checked": false,
"label": "m/s",
"value": "radio-2",
"type": "radio",
"attr": {
"data-type": "radio",
"data-max-beyond": "160",
"data-step-increments": "[0.002,0.005,0.015,0.03,0.05,0.1,0.25]",
"data-steps": "[0,0.02,0.07,0.14,0.56,1.39,4.17,13.89]"
}
},
{
"name": "radio",
"disabled": false,
"checked": false,
"label": "l/s",
"value": "radio-3",
"type": "radio",
"attr": {
"data-type": "radio",
"data-max-beyond": "180",
"data-step-increments": "[5,10,10,50,50,100,200]",
"data-steps": "[0,20,70,150,550,1400,4100,13900]"
}
}
]
}
}
],
"products": {
"id": "filter-products-grid",
"items": [
{
"modifiers": [
"image",
"bordered",
"product"
],
"title": "COLIBRI Wall",
"description": "Cirkulärt takdon för tilluft - Plan överdel",
"href": "#",
"image": {
"src": "/mocks/img/product-image-gold-rx-small.jpg",
"alt": ""
}
},
{
"modifiers": [
"image",
"bordered",
"product"
],
"title": "CRG",
"description": "Adapter till systemundertak",
"href": "#",
"image": {
"src": "/mocks/img/product-image-gold-rx-small.jpg",
"alt": ""
}
},
{
"modifiers": [
"image",
"bordered",
"product"
],
"title": "Rumsprodukter",
"description": "Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.",
"href": "#",
"image": {
"src": "/mocks/img/product-image1.png",
"alt": ""
}
},
{
"modifiers": [
"image",
"bordered",
"product"
],
"title": "Rumsprodukter 2",
"description": "Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.",
"href": "#",
"image": {
"src": "/mocks/img/product-image1.png",
"alt": ""
}
}
]
},
"loadMore": {
"tag": "button",
"label": "Ladda fler",
"href": "/mocks/api/products.json",
"attributes": {
"aria-controls": "filter-products-grid",
"data-template-id": "product-data-tmpl"
},
"additionalClasses": "js-load-more"
}
}
class ProductFilters {
constructor(el) {
this.handleChange = this.handleChange.bind(this);
this.handleRangeSliderChange = this.handleRangeSliderChange.bind(this);
this.toggleFiltersNav = this.toggleFiltersNav.bind(this);
this.el = el;
this.checkboxes = el.querySelectorAll('input[type="checkbox"]');
this.checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', this.handleChange);
});
this.tagItemList = document.querySelector('.chips-list');
this.tagBlueprint = document.querySelector('.tag-blueprint');
this.filtersWrapper = document.querySelector('.product-filters');
this.overFlowHidden = 'h-overflow-hidden';
this.filtersMobileActive = 'filters-mobile-active';
this.filtersOpenButton = document.querySelector('.product-filters__open-button');
this.filtersCloseButton = document.querySelector('.product-filters__close-button');
this.viewFiltersButton = document.querySelector('.view-products-button');
this.clearFilterButton = document.querySelector('.js-clear-filters');
this.rangeSliders = document.querySelectorAll('.js-range-slider');
this.rangeSliders.forEach((slider) => {
slider.addEventListener('change', this.handleRangeSliderChange);
});
this.init();
}
calculateFraction(value, minValue, maxValue) {
// Ensure that the value is not less than minValue and not greater than maxValue
value = Math.min(maxValue, Math.max(minValue, value));
// Calculate the fraction
const fraction = (value - minValue) / (maxValue - minValue);
return fraction;
}
handleChange(event) {
const checkbox = event.target;
const checkboxText = checkbox.getAttribute('data-text');
const accordion = checkbox.closest('.accordion');
const checkedInputs = accordion.querySelectorAll('input:checked');
const counterContainer = accordion.querySelector('.accordion__counter');
counterContainer.style.display = checkedInputs.length > 0 ? 'inline-flex' : '';
counterContainer.innerHTML = checkedInputs.length;
if (!checkbox.checked) {
const checkedInputEl = this.tagItemList.querySelector('[data-text="' + checkboxText + '"]');
checkedInputEl && this.tagItemList.removeChild(checkedInputEl);
} else {
const li = this.tagBlueprint.cloneNode(true);
li.classList.remove('tag-blueprint');
li.setAttribute('data-text', checkboxText);
li.querySelector('.chips__text').innerHTML = checkboxText;
li.addEventListener('click', () => {
checkbox.checked = false;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
}, { once: true });
this.tagItemList.appendChild(li);
}
const listItemsArray = this.tagItemList.querySelectorAll('li:not(.tag-blueprint)');
this.clearFilterButton.style.display = listItemsArray.length ? 'inline-block' : '';
}
buildChipsList() {
const savedFiltersArray = sessionStorage.getItem('filters array');
const savedFiltersDictionary = sessionStorage.getItem('filters dictionary');
const filtersArray = savedFiltersArray ? JSON.parse(savedFiltersArray) : [];
const filtersDictionary = savedFiltersDictionary ? JSON.parse(savedFiltersDictionary) : {};
if (filtersDictionary && Object.keys(filtersDictionary).length > 0) {
let sliderIds = Object.keys(filtersDictionary);
sliderIds.forEach((sliderId) => {
const switcher = document.querySelector(`input[type="radio"][value="${sliderId}"]`);
const slider = switcher && switcher.closest('.js-range-slider');
if (!slider) return;
switcher.checked = true;
switcher.dispatchEvent(new Event('click', { bubbles: true }));
const steps = JSON.parse(slider.dataset.steps);
const stepIncrements = JSON.parse(slider.dataset.stepIncrements);
let [amount] = filtersDictionary[sliderId].split('|');
amount = parseFloat(amount);
// Interval width for single step(0-1)
const stepInterval = 1 / stepIncrements.length;
const stepIndex = steps.findLastIndex((step) => step <= amount);
const startValue = steps[stepIndex]; // Start value of handle interval(units)
const endValue = steps[stepIndex + 1] || steps[stepIndex]; // And value of handle interval(units)
let handlePosition = stepIndex * stepInterval + ((amount - startValue) / (endValue - startValue) || 0) * stepInterval;
const input = slider.querySelector('.input');
input.value = handlePosition;
input.dispatchEvent(new Event('change', { bubbles: true }));
});
}
if (filtersArray && filtersArray.length > 0) {
for (let i = 0; i < filtersArray.length; i++) {
const filterItem = filtersArray[i];
const targetCheckbox = Array.from(this.checkboxes).find(checkbox => checkbox.value === filterItem.value);
if (targetCheckbox) {
targetCheckbox.setAttribute('data-should-update-filters', i === filtersArray.length - 1);
targetCheckbox.checked = true;
targetCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
targetCheckbox.removeAttribute('data-should-update-filters');
}
}
}
}
handleRangeSliderChange(event) {
if (!event.target.classList.contains('js-range-slider')) return;
const rangeSliderElement = event.target;
const rangeSliderTitle = rangeSliderElement.dataset.title;
const { max, input, isDirty } = event.detail || {};
const accordion = event.target.closest('.accordion');
const counterContainer = accordion.querySelector('.accordion__counter');
counterContainer.style.display = isDirty ? 'inline-flex' : '';
counterContainer.innerHTML = 1;
if (event.detail) {
const rangeSliderText = `${rangeSliderTitle}: ${input}${input === max ? '+' : ''}`;
let li = this.tagItemList.querySelector('[data-range-slider-id="' + rangeSliderElement.dataset.rangeSliderId + '"]');
if (!li) {
const li = this.tagBlueprint.cloneNode(true);
li.classList.remove('tag-blueprint');
li.setAttribute('data-text', rangeSliderText);
li.dataset.rangeSliderId = rangeSliderElement.dataset.rangeSliderId;
li.querySelector('.chips__text').innerHTML = rangeSliderText;
li.addEventListener('click', () => {
rangeSliderElement.dispatchEvent(new Event('reset'));
rangeSliderElement.dispatchEvent(new Event('change', { bubbles: true }));
}, { once: true });
this.tagItemList.appendChild(li);
} else {
li.setAttribute('data-text', rangeSliderText);
li.dataset.rangeSliderId = rangeSliderElement.dataset.rangeSliderId;
li.querySelector('.chips__text').innerHTML = rangeSliderText;
}
} else {
const rangeSliderChip = this.tagItemList.querySelector('[data-range-slider-id="' + rangeSliderElement.dataset.rangeSliderId + '"]');
rangeSliderChip && this.tagItemList.removeChild(rangeSliderChip);
}
const listItemsArray = this.tagItemList.querySelectorAll('li:not(.tag-blueprint)');
this.clearFilterButton.style.display = listItemsArray.length ? 'inline-block' : '';
}
toggleFiltersNav() {
if (!document.body.classList.contains(this.overFlowHidden)) {
this.scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(this.overFlowHidden);
this.filtersWrapper.classList.add(this.filtersMobileActive);
document.body.style.top = `-${this.scrollTop}px`;
} else {
document.body.classList.remove(this.overFlowHidden);
this.filtersWrapper.classList.remove(this.filtersMobileActive);
document.body.style.top = '';
document.scrollingElement.scrollTop = this.scrollTop;
}
}
init() {
this.filtersOpenButton.addEventListener('click', this.toggleFiltersNav);
this.filtersCloseButton.addEventListener('click', this.toggleFiltersNav);
this.viewFiltersButton.addEventListener('click', this.toggleFiltersNav);
setTimeout(() => this.buildChipsList(), 300);
}
}
export default ProductFilters;
import ProductFilters from './ProductFilters';
const els = document.querySelectorAll('.js-product-filters');
for (let el of els) {
new ProductFilters(el);
}
.product-filters {
padding: 16px 0 0;
@include breakpoint($l) {
padding: 24px 0 0;
}
&__top-panel {
margin: 0;
@include breakpoint($l) {
margin: 0 0 24px;
}
}
&__sort-info {
margin: 0 -16px;
@include breakpoint($l) {
margin: 0;
}
}
&__btn-row {
margin: 0;
display: block;
@include breakpoint($l) {
display: none;
margin: 0 0 24px;
}
}
&.filters-mobile-active {
.product-filters__sidebar {
display: block;
}
}
.chips-list {
padding-right: 40px;
}
.reset-filters-button {
display: none;
color: $color-black;
text-decoration: underline;
font-size: size(1.8);
margin: 12px 0 12px -8px;
@include breakpoint($l) {
margin: 12px 0;
}
&:hover {
text-decoration: none;
}
}
.form-item--horizontal .form-item__label {
margin: -8px 8px 8px 0;
@include breakpoint($l) {
}
}
.select__select--ghost {
margin-bottom: 14px;
padding: 2px 20px 2px 0;
@include breakpoint($l) {
padding: 10px 20px 8px 0;
margin-bottom: 16px;
}
}
&__sidebar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color-white;
z-index: 10;
overflow: auto;
padding: 80px 0 97px;
display: none;
@include breakpoint($l) {
position: static;
padding: 0;
display: block;
}
&-top-bar {
display: block;
padding: 20px;
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: $color-white;
@include breakpoint($l) {
position: static;
display: none;
}
}
}
&__sidebar-button-holder {
background: $color-gray-1;
padding: 16px 16px 25px;
text-align: center;
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
@include breakpoint($l) {
display: none;
}
}
&__open-button {
display: inline-block;
.menu-button {
margin: 0;
padding: 12px 8px;
min-width: 134px;
border: 2px solid $color-gray-5;
flex-direction: row;
justify-content: space-between;
}
.menu-button__label {
padding: 0;
font-size: 12px;
font-weight: 700;
}
.menu-button__icon {
border-width: 2px 0 0px 0;
height: 13px;
}
.menu-button__icon {
&:before {
width: 58%;
margin-top: -2px;
}
&:after {
top: auto;
width: 30%;
bottom: 0;
margin: 0;
}
}
}
&__close-button {
z-index: 2;
.menu-button__icon {
border: none;
&:before {
transform: rotate((45deg));
}
&:after {
transform: rotate((-45deg));
}
}
}
.accordion__button {
color: $color-black;
}
.accordion__counter {
display: none;
}
.tag-blueprint {
&:first-child {
display: none;
}
}
}
.js-clear-filters {
color: $color-black;
}
No notes defined.