Accordeon

Accordeon is a component that contains a list of collapsables. Once a collapsable is opened, the previous one closes to make sure that only one is open at the same time.

Default with numbers

px 

			
				<div class="o-accordeon js-accordeon">
	<ul class="o-accordeon__list">
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								1
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								2
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								3
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>

Default

px 

			
				<div class="o-accordeon js-accordeon">
	<ul class="o-accordeon__list">
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse undefined">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>

With cross and numbers

px 

			
				<div class="o-accordeon js-accordeon">
	<ul class="o-accordeon__list">
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								1
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								2
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							<span class="m-collapse__number">
								3
							</span>
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>

With cross

px 

			
				<div class="o-accordeon js-accordeon">
	<ul class="o-accordeon__list">
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
		<li class="o-accordeon__item">
			<div class="m-collapse o-accordeon__collapse m-collapse--with-cross">
				<header class="m-collapse__header">
					<div class="m-collapse__header-container ">
						<h4 class="m-collapse__title">
							Optimaliseer jouw manier van werken
						</h4>
						<button class="m-collapse__close"></button>
					</div>
				</header>
				<div class="m-collapse__content">
					<div class="m-collapse__content-container ">
						<p>
							Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
							ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Vivamus
							sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
						</p>
					</div>
				</div>
			</div>
		</li>
	</ul>
</div>