Filter

Component consisting out of collapsable sections that can contain input or toggle elements to filter a certain type of content. It is mainly used on search pages to alter the result to the users preferences. The filter is always used as a sidebar of the main content.

Default

px

			
				<form class="o-filter js-filter ">
	<div class="o-filter__content">
		<fieldset class="o-filter__item ">
			<legend class="o-filter__header">
				<h5 class="o-filter__title">Locatie</h5>
				<span class="o-filter__arrow"></span>
			</legend>
			<div class="o-filter__item-content">
				<div class="o-filter__item-container">
					<div class="m-toggle-group js-toggle-group o-filter__list">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-location-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-location-1" name="filter-location-1" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Maasmechelen (11)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-location-2">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-location-2" name="filter-location-2" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Genk (2)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-location-3">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-location-3" name="filter-location-3" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Zutendaal (2)</span>
									</label>
								</div>
							</li>
						</ul>
						<div class="m-toggle-group__more">
							<div class="m-toggle-group js-toggle-group ">
								<ul class="m-toggle-group__list">
								</ul>
							</div>
						</div>
						<button class="m-toggle-group__more-button">
							<span class="m-toggle-group__expand">Meer</span>
							<span class="m-toggle-group__compress">Minder</span>
						</button>
					</div>
					<div class="o-filter__more-content">
						<div class="m-toggle-group js-toggle-group ">
							<ul class="m-toggle-group__list">
								<li class="m-toggle-group__item">
									<div class="a-toggle ">
										<label class="a-toggle__container" for="filter-location-4">
											<div class="a-toggle__wrapper">
												<input class="a-toggle__input" type="checkbox" id="filter-location-4" name="filter-location-4" />
												<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
												<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
											</div>
											<span class="a-toggle__label ">Luik (5)</span>
										</label>
									</div>
								</li>
								<li class="m-toggle-group__item">
									<div class="a-toggle ">
										<label class="a-toggle__container" for="filter-location-5">
											<div class="a-toggle__wrapper">
												<input class="a-toggle__input" type="checkbox" id="filter-location-5" name="filter-location-5" />
												<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
												<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
											</div>
											<span class="a-toggle__label ">Henegouwen (12)</span>
										</label>
									</div>
								</li>
								<li class="m-toggle-group__item">
									<div class="a-toggle ">
										<label class="a-toggle__container" for="filter-location-6">
											<div class="a-toggle__wrapper">
												<input class="a-toggle__input" type="checkbox" id="filter-location-6" name="filter-location-6" />
												<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
												<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
											</div>
											<span class="a-toggle__label ">Brussel (2)</span>
										</label>
									</div>
								</li>
								<li class="m-toggle-group__item">
									<div class="a-toggle ">
										<label class="a-toggle__container" for="filter-location-7">
											<div class="a-toggle__wrapper">
												<input class="a-toggle__input" type="checkbox" id="filter-location-7" name="filter-location-7" />
												<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
												<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
											</div>
											<span class="a-toggle__label ">Luik (24)</span>
										</label>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<a class="o-filter__more" href="#">
						<span class="o-filter__expand">Meer</span>
						<span class="o-filter__compress">Minder</span>
					</a>
				</div>
			</div>
		</fieldset>
		<fieldset class="o-filter__item ">
			<legend class="o-filter__header">
				<h5 class="o-filter__title">Leermethode</h5>
				<span class="o-filter__arrow"></span>
			</legend>
			<div class="o-filter__item-content">
				<div class="o-filter__item-container">
					<div class="m-toggle-group js-toggle-group o-filter__list">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-methode-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-methode-1" name="filter-methode-1" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Klassikaal (14)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-methode-2">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-methode-2" name="filter-methode-2" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">E-Learning (1)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-methode-3">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-methode-3" name="filter-methode-3" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Virtuele klas (2)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-methode-4">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-methode-4" name="filter-methode-4" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Bedrijfstheater (2)</span>
									</label>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</fieldset>
		<fieldset class="o-filter__item ">
			<legend class="o-filter__header">
				<h5 class="o-filter__title">Duur</h5>
				<span class="o-filter__arrow"></span>
			</legend>
			<div class="o-filter__item-content">
				<div class="o-filter__item-container">
					<div class="m-toggle-group js-toggle-group o-filter__list">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-duration-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-duration-1" name="filter-duration-1" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">item</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-duration-2">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-duration-2" name="filter-duration-2" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">item</span>
									</label>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</fieldset>
		<fieldset class="o-filter__item ">
			<legend class="o-filter__header">
				<h5 class="o-filter__title">Thema&#39;s</h5>
				<span class="o-filter__arrow"></span>
			</legend>
			<div class="o-filter__item-content">
				<div class="o-filter__item-container">
					<div class="m-toggle-group js-toggle-group o-filter__list">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-1" name="filter-themes-1" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Informatica (202)</span>
									</label>
								</div>
								<div class="m-toggle-group js-toggle-group m-toggle-group--sub">
									<ul class="m-toggle-group__list">
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="filter-themes-1-1">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="filter-themes-1-1" name="filter-themes-1-1" />
														<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
														<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
													</div>
													<span class="a-toggle__label ">Voor eindgebruiker (123)</span>
												</label>
											</div>
											<div class="m-toggle-group js-toggle-group m-toggle-group--sub">
												<ul class="m-toggle-group__list">
													<li class="m-toggle-group__item">
														<div class="a-toggle ">
															<label class="a-toggle__container" for="filter-themes-1-1-1">
																<div class="a-toggle__wrapper">
																	<input class="a-toggle__input" type="checkbox" id="filter-themes-1-1-1" name="filter-themes-1-1-1" />
																	<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
																	<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
																</div>
																<span class="a-toggle__label ">teksverwerking en opmaak (8)</span>
															</label>
														</div>
													</li>
												</ul>
											</div>
										</li>
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="filter-themes-1-2">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="filter-themes-1-2" name="filter-themes-1-2" />
														<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
														<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
													</div>
													<span class="a-toggle__label ">Rekenbladen (59)</span>
												</label>
											</div>
										</li>
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="filter-themes-1-3">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="filter-themes-1-3" name="filter-themes-1-3" />
														<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
														<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
													</div>
													<span class="a-toggle__label ">Visual Basic for application (59)</span>
												</label>
											</div>
										</li>
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="filter-themes-1-4">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="filter-themes-1-4" name="filter-themes-1-4" />
														<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
														<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
													</div>
													<span class="a-toggle__label ">Presentaties, schema&#39;s en diagrammen (59)</span>
												</label>
											</div>
										</li>
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="filter-themes-1-5">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="filter-themes-1-5" name="filter-themes-1-5" />
														<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
														<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
													</div>
													<span class="a-toggle__label ">Wegwijs in nieuwe digitale tools (59)</span>
												</label>
											</div>
										</li>
									</ul>
									<div class="m-toggle-group__more">
										<div class="m-toggle-group js-toggle-group ">
											<ul class="m-toggle-group__list">
											</ul>
										</div>
									</div>
									<button class="m-toggle-group__more-button">
										<span class="m-toggle-group__expand">Meer</span>
										<span class="m-toggle-group__compress">Minder</span>
									</button>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-2">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-2" name="filter-themes-2" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Proffessioneel functioneren</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-3">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-3" name="filter-themes-3" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Marketing, communicatie en sales (202)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-4">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-4" name="filter-themes-4" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Persoonlijke ontwikkeling (202)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-4">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-4" name="filter-themes-4" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Ondersteunende dinesten (202)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-themes-4">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-themes-4" name="filter-themes-4" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Organisatiemanagement (202)</span>
									</label>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</fieldset>
		<fieldset class="o-filter__item ">
			<legend class="o-filter__header">
				<h5 class="o-filter__title">Taal</h5>
				<span class="o-filter__arrow"></span>
			</legend>
			<div class="o-filter__item-content">
				<div class="o-filter__item-container">
					<div class="m-toggle-group js-toggle-group o-filter__list">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-language-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-language-1" name="filter-language-1" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Nederlands (17)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-language-2">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-language-2" name="filter-language-2" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Frans (17)</span>
									</label>
								</div>
							</li>
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="filter-language-3">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="filter-language-3" name="filter-language-3" />
											<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
											<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
										</div>
										<span class="a-toggle__label ">Engels (5)</span>
									</label>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</fieldset>
	</div>
	<div class="o-filter__footer">
		<div class="a-toggle ">
			<label class="a-toggle__container" for="filter-extra-check">
				<div class="a-toggle__wrapper">
					<input class="a-toggle__input" type="checkbox" id="filter-extra-check" name="filter-extra-check" />
					<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
					<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
				</div>
				<span class="a-toggle__label ">Beschikbare plaatsen</span>
			</label>
		</div>
	</div>
</form>