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>
