I've been working on creating an accordion that smoothly rolls down when selected and rolls back up when closed. While I've managed to get it to roll down, it simply closes without any transition when I try to close it.
I attempted setting a max-height on the accordion elements and using
transition: max-height 1s ease-in/ease-outAs a beginner in web development, I'm struggling to identify my mistakes. Any guidance would be greatly appreciated!
$('.topic-container').on('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
$(this).addClass('closed')
} else {
$(this).addClass('active')
$(this).removeClass('closed')
.siblings()
.removeClass('active')
.addClass('closed')
}
});.accordion .content {
position: relative;
height: 0;
font-size: 20px;
text-align: justify;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 0;
transition: max-height 1s ease;
}
.accordion .topic-container.active .content {
height: 100%;
max-height: 1000px;
transition: max-height 1s ease-in;
}
.accordion .topic-container.closed .content {
height: 0;
max-height: 0;
transition: max-height 1s ease-out;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-body">
<div class="accordion">
<div class="topic-container closed">
<div class="label">
Header
</div>
<div class="content">
Inside the accordion tab
</div>
</div>
</div>
</div>