davewsmith/zipper.html

## zipper.html
<!doctype html>
<html>
<head>
<title>Zip Test</title>
<style>
body {
    color: #333;
    font-size: 15px;
    line-height: 15px;
    font-family: sans-serif;
}

label {
    display: block;
    width: 100%;
    padding: 0;
    cursor: pointer;
}

.zipper {
    display: none;
}

div.menu {
    margin: 0;
}

div.menu .zipee {
    max-height: 0;
    transition: max-height: 0.8s linear;
    overflow: hidden;
}

div.menu .zipper:checked ~ .zipee {
    max-height: 500px;
    margin-bottom: 1rem;
}

div.menu label::before {
    display: inline-block;
    width: 1em;
    content: "\25b8 ";
}

div.menu .zipper:checked ~ label::before {
    content: "\25be ";
}

</style>
</head>
<body>

<p>Pure CSS zippers. Idea from https://css-tricks.com/tour-performant-responsive-css-site/
</p>

<div class="menu">
    <input class="zipper" id="z1" type="checkbox" />
    <label for="z1">Click Me</label>
    <div class="zipee">
    Here's some stuff
    </div>
</div>

<div class="menu">
    <input class="zipper" id="z2" type="checkbox" />
    <label for="z2">Click Me, too</label>
    <div class="zipee">
    Here's some more stuff
    </div>
</div>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Zip Test</title>
	<style>
	body {
	color: #333;
	font-size: 15px;
	line-height: 15px;
	font-family: sans-serif;
	}

	label {
	display: block;
	width: 100%;
	padding: 0;
	cursor: pointer;
	}

	.zipper {
	display: none;
	}

	div.menu {
	margin: 0;
	}

	div.menu .zipee {
	max-height: 0;
	transition: max-height: 0.8s linear;
	overflow: hidden;
	}

	div.menu .zipper:checked ~ .zipee {
	max-height: 500px;
	margin-bottom: 1rem;
	}

	div.menu label::before {
	display: inline-block;
	width: 1em;
	content: "\25b8 ";
	}

	div.menu .zipper:checked ~ label::before {
	content: "\25be ";
	}

	</style>
	</head>
	<body>

	<p>Pure CSS zippers. Idea from https://css-tricks.com/tour-performant-responsive-css-site/
	</p>

	<div class="menu">
	<input class="zipper" id="z1" type="checkbox" />
	<label for="z1">Click Me</label>
	<div class="zipee">
	Here's some stuff
	</div>
	</div>

	<div class="menu">
	<input class="zipper" id="z2" type="checkbox" />
	<label for="z2">Click Me, too</label>
	<div class="zipee">
	Here's some more stuff
	</div>
	</div>

	</body>
	</html>