PROWAREtech

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.

See also: use JavaScript to hide large amounts of text to better format 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

Alternate Versions

This version operates as above only the address does not change; it is all handled by the HTML code.


<!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 input[type="radio"] {
			display: none;
		}
		.auto-hide section {
			position: relative;
			padding: 15px 0;
		}
		.auto-hide section label {
			display: block;
			line-height: 35px;
			text-decoration: none;
			color: inherit;
			border-bottom: 2px solid #999;
			cursor: pointer;
		}
		.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: 0;
		}
		.auto-hide .selector:checked + section .sub {
			overflow: auto;
			max-height: 100vh;
		}
		.auto-hide section label::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 .selector:checked + section label::after {
			border-width: 6px 6px 0 6px;
		}
	</style>
</head>
<body>
	<h1><a href="#!">Acme Delivery Service</a></h1>
	<div class="auto-hide">
		<input type="radio" name="radio-selector" class="selector" id="updates" />
		<section>
			<label for="updates">Get Email Updates</label>
			<div class="sub">
				<span>All Events</span>
				<span>Delivered</span>
				<span>In transit</span>
				<span>Acceptance</span>
			</div>
		</section>
		<input type="radio" name="radio-selector" class="selector" id="tracking" />
		<section>
			<label for="tracking">Tracking History</label>
			<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>
		<input type="radio" name="radio-selector" class="selector" id="product" />
		<section>
			<label for="product">Product Details</label>
			<div class="sub">
				<span>Ground - 5 Day</span>
			</div>
		</div>
	</div>
</body>
</html>

This version will allow the user to have one or more sections open at a time.


<!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 input[type="checkbox"] {
			display: none;
		}
		.auto-hide section {
			position: relative;
			padding: 15px 0;
		}
		.auto-hide section label {
			display: block;
			line-height: 35px;
			text-decoration: none;
			color: inherit;
			border-bottom: 2px solid #999;
			cursor: pointer;
		}
		.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: 0;
		}
		.auto-hide .selector:checked + section .sub {
			overflow: auto;
			max-height: 100vh;
		}
		.auto-hide section label::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 .selector:checked + section label::after {
			border-width: 6px 6px 0 6px;
		}
	</style>
</head>
<body>
	<h1><a href="#!">Acme Delivery Service</a></h1>
	<div class="auto-hide">
		<input type="checkbox" class="selector" id="updates" />
		<section>
			<label for="updates">Get Email Updates</label>
			<div class="sub">
				<span>All Events</span>
				<span>Delivered</span>
				<span>In transit</span>
				<span>Acceptance</span>
			</div>
		</section>
		<input type="checkbox" class="selector" id="tracking" />
		<section>
			<label for="tracking">Tracking History</label>
			<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>
		<input type="checkbox" class="selector" id="product" />
		<section>
			<label for="product">Product Details</label>
			<div class="sub">
				<span>Ground - 5 Day</span>
			</div>
		</div>
	</div>
</body>
</html>

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