This is probably a question many of you have had and for some reason the fix isn’t easy to find.
But there is a fix!
Allow me to show:
First you need to create a grid element with the following css:
<div class="grid-element">
</div>
<style>
.grid-element {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
}
</style>Now add the content-wrapper inside the grid-element:
<div class="grid-element">
<div class="content-wrapper">
<!-- here comes your content to slide down -->
</div>
</div>
<style>
.grid-element {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
}
.content-wrapper {
overflow: hidden;
}
</style>Now the content will still be hidden to allowed the slidedown to work you’ll have to add the conditional class slidedown-active with the following css grid-template-rows: 1fr;
In this example i add and remove the class with a button but you can apply this slidedown anyway you want and put anything inside the content-wrapper that you want to slidedown.
<button onclick="toggleSlidedown()">toggle slidedown</button>
<div class="grid-element">
<div class="content-wrapper">
<!-- here comes your content to slide down -->
<p>hello world!</p>
</div>
</div>
<style>
.grid-element {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
}
.content-wrapper {
overflow: hidden;
background-color: red;
}
.slidedown-active {
grid-template-rows: 1fr;
}
</style>
<script lang="js">
function toggleSlidedown() {
const element = document.querySelector(".grid-element");
if (element.classList.contains('slidedown-active')) {
element.classList.remove("slidedown-active");
} else {
element.classList.add("slidedown-active");
}
}
</script>
The solution is a grid!
<button onclick="toggleSlidedown()">toggle slidedown</button>
<div class="grid-element">
<div class="content-wrapper">
<!-- here comes your content to slide down -->
<p>hello world!</p>
</div>
</div>
<style>
.grid-element {
display: grid;
grid-template-rows: 0fr;
transition-property: grid-template-rows;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
}
.content-wrapper {
overflow: hidden;
background-color: red;
}
.slidedown-active {
grid-template-rows: 1fr;
}
</style>
<script lang="js">
function toggleSlidedown() {
const element = document.querySelector(".grid-element");
if (element.classList.contains('slidedown-active')) {
element.classList.remove("slidedown-active");
} else {
element.classList.add("slidedown-active");
}
}
</script>