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

px

			
				<div class="c-collapse js-collapse " role="button" tabindex="0">
	<div class="c-collapse__container">
		<div class="c-collapse__header">
			<div class="c-collapse__icon"></div>
			<span class="c-collapse__title">Collectie</span>
		</div>
		<div class="c-collapse__content">
			<ul class="c-collapse__list">
				<li class="c-collapse__list-item">
					<a href="/" class="c-collapse__item-link">
						<div class="c-icon c-collapse__item-icon">
							<svg viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9393 6.50006L5.24802e-06 6.50011L0 5.00011L15.9393 5.00006L12.4697 1.53039L13.5303 0.469727L18.2803 5.21973L18.8107 5.75006L18.2803 6.28039L13.5303 11.0304L12.4697 9.96973L15.9393 6.50006Z" />
							</svg>
						</div>
						<h3 class="c-collapse__item-text">
							De grootmeesters
						</h3>
					</a>
				</li>
				<li class="c-collapse__list-item">
					<a href="/" class="c-collapse__item-link">
						<div class="c-icon c-collapse__item-icon">
							<svg viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9393 6.50006L5.24802e-06 6.50011L0 5.00011L15.9393 5.00006L12.4697 1.53039L13.5303 0.469727L18.2803 5.21973L18.8107 5.75006L18.2803 6.28039L13.5303 11.0304L12.4697 9.96973L15.9393 6.50006Z" />
							</svg>
						</div>
						<h3 class="c-collapse__item-text">
							De blikvangers
						</h3>
					</a>
				</li>
				<li class="c-collapse__list-item">
					<a href="/" class="c-collapse__item-link">
						<div class="c-icon c-collapse__item-icon">
							<svg viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9393 6.50006L5.24802e-06 6.50011L0 5.00011L15.9393 5.00006L12.4697 1.53039L13.5303 0.469727L18.2803 5.21973L18.8107 5.75006L18.2803 6.28039L13.5303 11.0304L12.4697 9.96973L15.9393 6.50006Z" />
							</svg>
						</div>
						<h3 class="c-collapse__item-text">
							De volledige collectie
						</h3>
					</a>
				</li>
				<li class="c-collapse__list-item">
					<a href="/" class="c-collapse__item-link">
						<div class="c-icon c-collapse__item-icon">
							<svg viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9393 6.50006L5.24802e-06 6.50011L0 5.00011L15.9393 5.00006L12.4697 1.53039L13.5303 0.469727L18.2803 5.21973L18.8107 5.75006L18.2803 6.28039L13.5303 11.0304L12.4697 9.96973L15.9393 6.50006Z" />
							</svg>
						</div>
						<h3 class="c-collapse__item-text">
							Artiesten in residentie
						</h3>
					</a>
				</li>
			</ul>
		</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.