Target-Based Content Display

Show/hide content based on target hashtag from links. With animation.

by Travis Almand

HTML

<div id="container">

	<div id="anchor_container">
		<a href="#a">target slide a</a>
		<a href="#b">target slide b</a>
		<a href="#c">target slide c</a>
	</div>

	<div id="slide_container">
		<div id="a" class="slide">slide a</div>
		<div id="b" class="slide">slide b</div>
		<div id="c" class="slide">slide c</div>
	</div>
	
</div>

SCSS

#container {
	align-content: stretch;
	align-items: stretch;
	display: flex;
	height: 200px;
}

#anchor_container {
	border: 1px solid blue;
	
	a {
		display: block;
		padding: 10px;
	}
}

#slide_container {
	border: 1px solid red;
	flex-grow: 1;
	padding: 10px;
	position: relative;
}

.slide {
	opacity: 0;
	position: absolute;
	transform: translate3d(0, -10px, 0);
	transition: all 0.25s;
}

.slide:target {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: all 0.25s 0.25s;
}