Menu

Component: Collapse

test

Trigger for expand/collapse is a button in .box-collapse-trigger which must have a data-collapse equals to id from .box-collapse-content.

For adding a +/- on the right side, just add .has-picto on .box-collapse-trigger.

<div class="box-collapse">
	<div class="box-collapse-trigger has-picto">
		<button type="button" aria-expanded="false" aria-controls="collapse1" data-collapse="collapse1">Expand</button>
	</div>
	<div class="box-collapse-content" id="collapse1">
		<div class="grid-flex v-align-middle">
			<div class="column">
				<a href="#" class="box-1">
					<div class="box-1-visual">
						<img src="images/visual-buddy.jpg" alt="" />
					</div>
					<div class="box-1-content">
						<h5>Example of card</h5>
						<p>Lorem ipsum dolor sit amet,
						consectetur adipisicing elit,
						sed do eiusmod tempor incididunt
						ut labore et dolore magna aliqua.</p>
						<span class="link-follow">Read more</span>
					</div>
				</a>
			</div>
			<div class="column">
				<a href="#" class="box-1">
					<div class="box-1-visual">
						<img src="images/visual-buddy.jpg" alt="" />
					</div>
					<div class="box-1-content">
						<h5>Example of card</h5>
						<p>Lorem ipsum dolor sit amet,
						consectetur adipisicing elit,
						sed do eiusmod tempor incididunt
						ut labore et dolore magna aliqua.</p>
						<span class="link-follow">Read more</span>
					</div>
				</a>
			</div>
			<div class="column">
				<h6>We can put everything we want in box collapse</h6>
			</div>
		</div>
	</div>
</div>

<div class="box-collapse">
	<div class="box-collapse-trigger">
		<button type="button" aria-expanded="false" aria-controls="collapse2" data-collapse="collapse2">This one has no pictogram</button>
	</div>
	<div class="box-collapse-content" id="collapse2">
		<p>test</p>
	</div>
</div>