I am trying to create an accordion which has a transition when you open and close it. Unfortunately I was not able to make the close transition(the open transition works perfectly). Any suggestions?
I think I should modify the javascript code(maybe add one more "active" class), but I am not sure. I am still learning html / css / javascript so expect to find some bad code here
var acc = document.getElementsByClassName("label");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
panel.classList.toggle("opened");
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}.accordions {
max-width: 760px;
width: 100%;
gap: 35px;
}
.accordion-body {
padding: 24px;
background-color: white;
border-radius: 16px;
border: 2px solid rgb(0, 0, 0, 20%);
outline: none;
}
.label {
padding: 24px;
background-color: white;
border-radius: 16px;
border: none;
cursor: pointer;
p {
font-size: 24px;
margin: 0;
}
img {
width: 50px;
height: 50px;
transition: 0.25s;
}
}
.active {
img {
transform: rotate(-180deg);
}
}
.accordion-content {
padding: 24px;
background-color: $white;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
display: none;
overflow: hidden;
gap: 24px;
hr {
margin: 0px 0px 20px 0px;
border: 1px solid black;
}
p {
margin: 0;
}
&.opened {
max-height: 0;
transition: max-height 0.2s ease-out;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Descoperă-ți Sportul</title>
<link rel="stylesheet" href="css/main.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>
<body>
<main class="main d-flex justify-content-center align-items-center flex-column">
<div class="accordion-body w-100" id="faq-1">
<button class="label d-flex justify-content-between align-items-center w-100">
<p class="fw-bold">Why should I practice a sport as a hobby?</p>
<img src="accordion-icon.svg" alt="icon" />
</button>
<div class="accordion-content">
<hr />
<p class="fw-medium">
Playing a sport as a hobby can improve physical and mental health, reduce stress, improve sleep quality, help maintain a healthy weight and provide social opportunities. It can also be a great way to learn new skills and enjoy your free time.
</p>
</div>
</div>
</main>
<script src="accordionSection.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>