<div id="wrap">

	<div class="ad ad--3s">
		<div class="ad__part ad__part--head">
			<span>Ad title (3 sec)</span>
		</div>
		<div class="ad__part ad__part--body">
			<span>Here goes the ad text.</span>
		</div>
	</div>

	<div class="ad ad--5s">
		<div class="ad__part ad__part--head">
			<span>Ad title (5 sec)</span>
		</div>
		<div class="ad__part ad__part--body">
			<span>Here goes the ad text.</span>
		</div>
	</div>

	<div class="ad ad--7s">
		<div class="ad__part ad__part--head">
			<span>Ad title (7 sec)</span>
		</div>
		<div class="ad__part ad__part--body">
			<span>Here goes the ad text.</span>
		</div>
	</div>

	<div class="ad ad--9s">
		<div class="ad__part ad__part--head">
			<span>Ad title (9 sec)</span>
		</div>
		<div class="ad__part ad__part--body">
			<span>Here goes the ad text.</span>
		</div>
	</div>

	<div class="ad ad--click">
		<label for="open-ad" class="ad__part ad__part--head">
			<span>Ad title (click)</span>
		</label>
		<input type="checkbox" id="open-ad">
		<div class="ad__part ad__part--body">
			<span>Here goes the ad text.</span>
		</div>
	</div>

</div>

html,
body {
	padding: 0;
	margin: 0;
	background-color: #fff;
	font-family: monospace;
	font-size: 18px;
	color: #333;
}

#wrap {
	width: 100%;
	max-width: 980px;
	margin: auto;
	padding: 40px 0;
}

@keyframes showAdBody {
	to {
		height: auto;
		padding: 10px;
	}
}

.ad {
	width: 300px;
	margin: 0 auto 20px;
	border: 2px solid #aaa;
	position: relative;

	&:last-child {
		margin-bottom: 0;
	}

	&__part {
		&--head {
			padding: 10px;
			font-weight: 700;
			cursor: pointer;
			display: block;
			user-select: none;
		}

		&--body {
			overflow: hidden;
			height: 0;
			padding: 0;
			animation: showAdBody 0s linear forwards;
		}
	}

	&--click {
		.ad {
			&__part {
				&--body {
					height: auto;
					padding: 10px;
					animation: none;
					display: none;
				}
			}
		}

		input {
			width: 0;
			height: 0;
			padding: 0;
			margin: 0;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			visibility: hidden;

			&:checked {
				& ~ .ad {
					&__part {
						&--body {
							display: block;
						}
					}
				}
			}
		}
	}

	&--3s {
		.ad {
			&__part {
				&--body {
					animation-delay: 3s;
				}
			}
		}
	}

	&--5s {
		.ad {
			&__part {
				&--body {
					animation-delay: 5s;
				}
			}
		}
	}

	&--7s {
		.ad {
			&__part {
				&--body {
					animation-delay: 7s;
				}
			}
		}
	}

	&--9s {
		.ad {
			&__part {
				&--body {
					animation-delay: 9s;
				}
			}
		}
	}
}