This code is a pared down version of:
Max-height 100% animation with flex by JChiem
Found through: w3c/csswg-drafts#626
This code is a pared down version of:
Max-height 100% animation with flex by JChiem
Found through: w3c/csswg-drafts#626
.expander { | |
display: flex; | |
} | |
.expander__container { | |
width: 100%; | |
} | |
.expander__content { | |
position: relative; | |
transition: all .3s ease; | |
max-height: 0; | |
overflow: hidden; | |
} | |
.expander__content--open { | |
max-height: 100%; | |
} | |
.expander2 { | |
display: flex; | |
} | |
.expander__container2 { | |
position: relative; | |
transition: all .3s ease; | |
max-height: 0; | |
overflow: hidden; | |
} | |
.expander__container2--open { | |
max-height: 100%; | |
} |
<div class="container"> | |
<div class="expander"> | |
<div class="expander__container"> | |
<button class="expander__button">Toggle content</button> | |
<div class="expander__content"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et faucibus turpis. Nam lacinia ex non maximus rhoncus ultrices odio ut laoreet.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="container"> | |
<button class="expander__button2">Toggle content 2 (Doesnt work)</button> | |
<div class="expander2"> | |
<div class="expander__container2"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et faucibus turpis. Nam lacinia ex non maximus rhoncus ultrices odio ut laoreet.</p> | |
</div> | |
</div> | |
</div> |
const btn = document.querySelector('.expander__button'); | |
const content = document.querySelector('.expander__content'); | |
btn.addEventListener('click', (e) => { | |
content.classList.toggle('expander__content--open'); | |
}); | |
const btn2 = document.querySelector('.expander__button2'); | |
const content2 = document.querySelector('.expander__container2'); | |
btn2.addEventListener('click', (e) => { | |
content2.classList.toggle('expander__container2--open'); | |
}); |