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>
tutorial
CSS: Add Stroke to Text - How to Outline Text

How to outline text by adding stroke using only CSS; compatible with all browsers including IE11.
CSS: Auto-hide Page Sections

Automatically hide page sections to maximize page space; uses HTML and CSS only.
CSS: Basic Contact Form

Create a responsive, good looking, basic contact form using only HTML and CSS.
CSS: Bokeh Background Online Code Generator

HTML and CSS only.
CSS: Box Shadow

All about the box-shadow property.
CSS: Card Selection Changes Background

Change the background when a card is selected using only HTML and CSS.
CSS: Carousel

Animated, responsive carousel / hero / slider menu using only HTML and CSS.
CSS: Center Elements on Page

How to center elements both vertically and horizontally on the page.
CSS: Christmas Themed Bokeh Background

A bokeh background with a Christmas theme.
CSS: Create a Speech Bubble/Balloon

An example popup speech bubble or balloon.
CSS: Custom Checkboxes and Radio Buttons

Create custom checkboxes and radio buttons using only HTML and CSS.
CSS: Custom Dropdown Lists

Stylish dropdown lists using only HTML and CSS.
CSS: Customize Scrollbars on Chrome, Edge and Firefox

Use only CSS to customize scrollbars.
CSS: Customize SELECT and OPTION elements

How to customize the look of select and option HTML elements.
CSS: Dark Mode Contact Form

Create a responsive dark mode contact form using only HTML and CSS.
CSS: Dark Mode Login and Register Form or Page

Combination dark mode login and register form in one using only HTML and CSS.
CSS: Detect Dark Mode

Using CSS @media query to detect if user is using dark mode theme.
CSS: Expanding Search Bar

HTML and CSS only.
CSS: Feature Queries

Use @supports to know which CSS features are supported.
CSS: Five Star Rating Form

An example five star rating form example using only HTML and CSS.
CSS: Flip Cards Based Website Landing Page

Responsive website landing page with flip cards using only HTML and CSS.
CSS: Format Images with Varying Aspect Ratios

Format images with varying aspect ratios to fit the same aspect ratio without stretching.
CSS: Hero or Banner Menu System

A great way to organize large menus.
CSS: Horizontally Scrolling Cards with a Snap-to Feature

Create cards with a horizontal scroll and a snap-to feature.
CSS: Image Portfolio

Create an image portfolio to show off images using only HTML and CSS.
CSS: Landing Page with Menu

A large menu that slides in from the sides and then the top.
CSS: Large Dropdown Menu

A responsive, large dropdown menu for sites with lots of menu options.
CSS: Loading Page - Brine Shrimp

Create an abstract brine shrimp swimming along while the page is loading.
CSS: Loading Page - Data Gatherer

Create an abstract net that appears to be gathering data as it animates.
CSS: Loading Page - Inch Worm

Create an abstract inch worm that inches along as the page is loading.
CSS: Loading Page - Laser Lights

Create a nerve racking light show while the page is loading.
CSS: Loading Page - Sine Wave

A sine wave to watch as the page loads.
CSS: Mastering Bootstrap Rows and Columns

How the rows and columns work.
CSS: Menu with Submenus

A menu system which has submenus upon submenus.
CSS: Mobile Navigation Menu

A mobile-centric navigation menu using HTML and CSS only.
CSS: Mobile-Responsive Website for Beginners

HTML and CSS only.
CSS: Mock Google Form

HTML and CSS only.
CSS: Page Rotates on the Y-axis to Reveal Menu

3D animated, responsive, Y-axis rotating page reveals menu using only HTML and CSS.
CSS: Page with Lifted Corners

A piece of paper laying flat with lifted, peeled or curled corners with a couple versions to help fit different scenarios.
CSS: Parallax Effect Footer

A web page footer with a parallax effect.
CSS: Parallax Effect Landing Page

HTML and CSS only.
CSS: Position Page Footer at the Bottom

How to position the page footer at the bottom for all browsers including IE6.
CSS: Rainbow Linear Gradient

A rainbow effect for a background.
CSS: Remove White Space Between Images

Several options to remove white space between pictures.
CSS: Responsive Avatar Cards

An interesting way to organize data in limited space; uses HTML and CSS only.
CSS: Single Page Website

HTML and CSS only.
CSS: Slick, Simple Nav-Bar Menu

HTML and CSS only.
CSS: Slide on Scroll

HTML and CSS only.
CSS: Tilting Page Reveals Menu

Animated, responsive, tilting website page reveals menu using only HTML and CSS.
CSS: Toggle Buttons

Use checkbox and radio controls to create toggle buttons just like on the Apple iPhone.
CSS: Unique Cube Menu

A rotating cube menu using only HTML and CSS.
CSS: Web Colors

A color sortable table of the standard web colors with their CSS names for use in Cascading Style Sheets pages.
CSS/JS: Landing Page with Water Ripples

A website landing page with a water ripple effect (requires one line of JavaScript).
Tailwind CSS Files Download

Download Tailwind v8.0.1 CSS files.
Comment
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