articles » current » css » auto-hide-page-sections

CSS: Auto-hide Page Sections

Automatically hide page sections to maximize page space; uses HTML and CSS only.

This code creates a page that is broken up into sections which reveal themselves only as the user clicks on each of them. This is to maximize the vertical space on the page.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Auto-hide without JavaScript</title>
	<style>
		body {
			font-family: sans-serif;
			font-size: 14px;
			color: #333;
			background-color: #fff;
		}
		h1 {
			padding: 1%;
			background-color: #631;
		}
		h1 a {
			text-decoration: none;
			color: gold;
		}
		.auto-hide {
			width: 100%;
		}
		.auto-hide section {
			position: relative;
			padding: 15px 0;
		}
		.auto-hide section a {
			display: block;
			text-decoration: none;
			color: inherit;
			border-bottom: 2px solid #999;
		}
		.auto-hide .sub a,
		.auto-hide .sub span {
			display: block;
			border-bottom: none;
			margin: 15px 30px;
			text-decoration: none;
			color: navy;
		}
		.auto-hide .sub {
			overflow: hidden;
			transition: max-height .5s;
			max-height: 0vh;
		}
		.auto-hide section:target .sub {
			overflow: auto;
			max-height: 100vh;
		}
		.auto-hide section a::after {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			right: 16px;
			top: 25px;
			margin-top: -3px;
			border-width: 0 6px 6px 6px;
			border-style: solid;
			border-color: #999 transparent;
		}
		.auto-hide section:target a::after {
			border-width: 6px 6px 0 6px;
		}
	</style>
</head>
<body>
	<h1><a href="#!">Up's Delivery Service, Corp.</a></h1>
	<div class="auto-hide">
		<section id="updates">
			<a href="#updates">Get Email Updates</a>
			<div class="sub">
				<span>All Events</span>
				<span>Delivered</span>
				<span>In transit</span>
				<span>Acceptance</span>
			</div>
		</section>
		<section id="tracking">
			<a href="#tracking">Tracking History</a>
			<div class="sub">
				<span>Jan 3 - Delivered</span>
				<span>Jan 2 - In transit</span>
				<span>Jan 1 - Delayed</span>
				<span>Dec 31 - Acceptance</span>
			</div>
		</section>
		<section id="product">
			<a href="#product">Product Details</a>
			<div class="sub">
				<span>Ground - 5 Day</span>
			</div>
		</div>
	</div>
</body>
</html>

Coding Video

https://youtu.be/ovRelbR8xyE


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE