Collapse

Component that lets you display/hide a block of content when clicking on the trigger. In general it can be seen as a simple toggle content component.

Default with number

px 

			
				<div class="m-collapse js-collapse">
	<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>

Default

px 

			
				<div class="m-collapse js-collapse">
	<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>

With cross and number

px 

			
				<div class="m-collapse m-collapse--with-cross js-collapse">
	<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>

With cross

px 

			
				<div class="m-collapse m-collapse--with-cross js-collapse">
	<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>

Documentation

States

  • is-open

    This state displays the content and this class shoud be used as a toggle. This also rotates the toggle button to indicate the action.

JavaScript

  • js-collapse

    This class will give the component the needed interaction. This class should only be applied when the JavaScript of the Brandplatform is needed.