Any tips for adding a CSS hover effect to labels below the input field? I'm looking for a solution that doesn't rely on specific div IDs.
You can view a live demo on JSFiddle here.
The goal is to expand or shrink the corresponding div when the checkbox is checked, and also have a hover effect to indicate that the label is clickable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>checkbox expand div</title>
<meta charset="UTF-8" />
<style>
.case {
position: relative;
margin-bottom: 1em;
}
.case label {
display: inline-block;
background-color: coral;
box-sizing: border-box;
width: 100%;
}
.case input {
text-align: center;
height: 55px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.project-input {
width: 100%;
height: 20px;
display: block;
}
.projectcontent {
max-height: 50px;
transition: max-height 0.15s ease-out;
overflow: hidden;
background-color: #888;
}
.case .project-input:checked + .projectcontent {
max-height: 2000px;
overflow: visible;
transition: max-height 0.3s ease-out;
}
</style>
</head>
<body>
<main>
<h1>Expand divs</h1>
<div class="case">
<label for="project-input">
<h2>Click here to expand/shrink this div</h2></label
>
<input type="checkbox" class="project-input" title="Expand / Shrink" />
<div class="projectcontent">
<p>Lorem ipsum<br />dolor sit amet.</p>
<p>consectetur<br />adipiscing elit.</p>
<p>sed do eiusmod<br />tempor incididunt.</p>
<p>ut labore et<br />dolore magna aliqua.</p>
</div>
</div>
<div class="case">
<label for="project-input">
<h2>Click here to expand/shrink this div</h2></label
>
<input type="checkbox" class="project-input" title="Expand / Shrink" />
<div class="projectcontent">
<p>Lorem ipsum<br />dolor sit amet.</p>
<p>consectetur<br />adipiscing elit.</p>
<p>sed do eiusmod<br />tempor incididunt.</p>
<p>ut labore et<br />dolore magna aliqua.</p>
</div>
</div>
</main>
</body>
</html>