アクティブ効果でコンテンツ領域を開閉するアコーディオン機能を実装します。

ご自由にご利用ください。

Previews

Examples html

<!-- accordion -->

<div class="accordion">

	<div class="container">

		<figure class="figure figure1">
			<figcaption class="figcaption figcaption1">
				<div class="content">
					<h2 class="heading"><a href="">Section 1</a></h2>
					<p class="description">Implement accordion functionality. Accordions are useful when you want to toggle between hiding and showing large amount of content.</p>
				</div>
			</figcaption>
		</figure>

		<figure class="figure figure2">
			<figcaption class="figcaption figcaption2">
				<div class="content">
					<h2 class="heading"><a href="">Section 2</a></h2>
					<p class="description">Implement accordion functionality. Accordions are useful when you want to toggle between hiding and showing large amount of content.</p>
				</div>
			</figcaption>
		</figure>

		<figure class="figure figure3">
			<figcaption class="figcaption figcaption3">
				<div class="content">
					<h2 class="heading"><a href="">Section 3</a></h2>
					<p class="description">Implement accordion functionality. Accordions are useful when you want to toggle between hiding and showing large amount of content.</p>
				</div>
			</figcaption>
		</figure>

		<figure class="figure figure4">
			<figcaption class="figcaption figcaption4">
				<div class="content">
					<h2 class="heading"><a href="">Section 4</a></h2>
					<p class="description">Implement accordion functionality. Accordions are useful when you want to toggle between hiding and showing large amount of content.</p>
				</div>
			</figcaption>
		</figure>

	</div>

</div>

<!-- /accordion -->

Examples css

/* - accordion - */

.accordion {
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

.container {
	width: 100%;
	height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

figure.figure {
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: default;
	transition: all .5s;
	-webkit-flex: 1;
	flex: 1;
}

figure.figure1 { 

	/* - background-image: url( "../../../assets/images/image1.jpg" ); - */

	background-image: url( "image1.jpg" );

}

figure.figure2 { 

	/* - background-image: url( "../../../assets/images/image2.jpg" ); - */

	background-image: url( "image2.jpg" );

}

figure.figure3 { 

	/* - background-image: url( "../../../assets/images/image3.jpg" ); - */

	background-image: url( "image3.jpg" );

}

figure.figure4 { 

	/* - background-image: url( "../../../assets/images/image4.jpg" ); - */

	background-image: url( "image4.jpg" );

}

figure.figure.open {
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
	-webkit-flex: 4;
	flex: 4;
}

figcaption.figcaption {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

figcaption.figcaption1 {
	background-color: rgba(0, 0, 0, 0.0);
}

figcaption.figcaption2 {
	background-color: rgba(0, 0, 0, 0.0);
}

figcaption.figcaption3 {
	background-color: rgba(0, 0, 0, 0.0);
}

figcaption.figcaption4 {
	background-color: rgba(0, 0, 0, 0.0);
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 25px 25px 25px 25px;
	background-color: rgba(0, 0, 0, 0.0);
	transition: all .5s;
	opacity: 0;
}

figure.figure.open .content {
	opacity: 1;
}

h2.heading {
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

h2.heading {
	font-family: sans-serif;
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 1.0);
}

h2.heading a {
	font-family: sans-serif;
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 1.0);
	transition: all .5s;
}

h2.heading a:hover {
	color: rgba(0, 0, 0, 0.5);
}

h2.heading a:active {
	color: rgba(0, 0, 0, 1.0);
}

p.description {
	width: 100%;
	height: auto;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

p.description {
	font-family: sans-serif;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(0, 0, 0, 1.0);
}

/* - /accordion - */

Examples javascript

// Add functionality to open and close content areas.（コンテンツ領域を開閉するための機能を追加します。）
$( function() {
	$('figure.figure').click( function() {
		$(this).toggleClass('open');
		$('figure.figure').not($(this)).removeClass('open');
	} );
} );