I'm trying to display the rest of my text with an animation on the height when you click on a button, I managed to do it but the problem is that I can't find a way to make it responsive.. Basically I display a height: 30px and an overflow: hidden.
And I toggle on a class that contains a height: 300px , it looks good in the mobile version but if I increase the resolution of the page the height will become too small.
I thought there might be a way to adapt the height with the width of the screen, or maybe there is another way to hide part of the text?
Below is the code:
Scss:
.about__body{
@include displayFlex($direction: column, $align-item: center);
gap: 20px;
&-content {
height: 60px;
overflow: hidden;
transition: all 400ms ease-in-out;
}
}
.about__body-content-show {
transition: all 400ms ease-in-out;
height: auto;
}
JS:
let btnAbout = document.getElementById("btn--about")
let contentAbout = document.querySelector(".about__body-content")
const onClickShow = () => {
btnAbout.addEventListener('click', (e) => {
e.preventDefault()
contentAbout.classList.toggle('about__body-content-show')
})
}
onClickShow()
You basically can use JS to achieve this and make your container same height as your content
document.getElementById('expand').addEventListener('click', function() {
document.querySelector('.content-holder').style.height = document.querySelector('.content').offsetHeight + 'px';
document.querySelector('.content-holder').classList.toggle('collapsed');
});
a working fiddle: https://jsfiddle.net/sdjhetq1/