CSS only slidedown on checkbox check - css

Question

I'm looking to create a slidedown effect on checkbox check without JS, so pure css. The problem is we can't use JS on this page.
I've look on so many websites, but they all say something different and most do use JS.
My HTML:
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div>
</label>
My CSS:
<style type="text/css">
.open-content:checked ~ .content-open {
visibility: visible!important; max-height: none!important;
padding: 20px 0px 20px 20px;
margin-top: 30px;
}
.fade-new {
transition: visbility 0.3s ease-in-out, max-height 0.3s ease-in-out;
}
.content-open {
max-height: 0px;
visibility: hidden;
background-color: #F5F5F5;
}
</style>
And how it looks:
But it isn't animated. I used opacity 0 to 1 and that works to make a nice animation, but I prefer sliding down if that is possible with checkbox + pure CSS. Does anyone know how to do this?

Answer 1

Yes, it is possible to create a pure CSS slide-down using the checkbox hack.
In this example I have separated the <label> from the <input> and linked them by:
giving the <input> an id
giving the <label> a matching for attribute
Working Example (Version 1):
This version slides down.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
background-color: #F5F5F5;
opacity: 0;
transform: translateY(-50px);
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
transform: translateY(0);
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
</div>
Working Example (Version 2):
This version unfurls.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
height: 0;
background-color: #F5F5F5;
opacity: 0;
overflow: hidden;
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
height: 120px;
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
</div>
Further Reading:
The "Checkbox Hack" (and things you can do with it) - CSS Tricks

Answer 2

i hope it help you
you also can use css animation
.fade-new{
height:0;
background:red;
opacity:0;
transition:1s;
}
.open-content:checked ~ .fade-new{
height:300px;
opacity:1;
transition:1s;
}
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div></span>
</label>