Forum Moderators: open
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>CSS See More Example</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.5em sans-serif;
}
h1 {
font-size: 1.5em;
color: #555;
text-align: center;
}
#container {
display: flex;
flex-direction: column;
padding: 1em;
}
#container input {
position: absolute;
left: -999em;
}
#container input:checked + label::after {
content: '\2212';
}
#container input:checked + label span {
opacity: 0;
}
#container input:checked + label + div {
display: block;
}
#container label {
display: block;
max-width: 13em;
margin: 0.5em 0;
cursor: pointer;
}
label::after{
content: '\0002b';
display: inline-block;
padding: 0 0.35em;
margin-left: 0.5em;
border-radius: 50%;
background-color: #888;
color: #fff;
}
label:hover::after,
label:active::after {
background-color: #f00;
}
label:hover span,
label:active span {
color: #f00;
}
#container div {
display: none;
max-width: 50em;
padding: 1em 2em;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fff;
}
</style>
</head>
<body>
<h1>CSS See More Example</h1>
<div id="container">
<input id="cb1" type="checkbox">
<label for="cb1"><span>See more versions</span></label>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Amet consectetur adipiscing elit ut aliquam. Quis lectus nulla
at volutpat. Habitasse platea dictumst vestibulum rhoncus est
pellentesque elit ullamcorper. Commodo nulla facilisi nullam
vehicula ipsum a arcu cursus vitae.
</p>
</div>
<input id="cb2" type="checkbox">
<label for="cb2"><span>See more versions</span></label>
<div>
<p>
Pharetra sit amet aliquam id. Purus faucibus ornare suspendisse
sed nisi. Et ultrices neque ornare aenean euismod elementum nisi
quis. Dolor morbi non arcu risus quis varius. Habitant morbi
tristique senectus et netus. Lectus sit amet est placerat in
egestas erat imperdiet sed. Leo integer malesuada nunc vel. Nibh
mauris cursus mattis molestie a.
</p>
</div>
<!-- #container --></div>
</body>
</html>
