Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one!
To get a clearer idea of this issue, please watch this screen recording: screen recording. The closing animation is not as smooth as the opening animation, even though it should be.
I'm struggling to identify what's causing this problem in my code. Below is my full code along with the CSS styling:
jsx
import styles from './ChapterList.module.scss';
import {useEffect, useState} from "react";
import {AccordionCloseIcon, AccordionShowIcon} from "../../../components/icons/Accordion";
// Rest of the JavaScript logic and components...
scss
.chapter_list {
// Styling rules for chapter list container...
}
.chapter_item {
// Styles for each individual chapter item...
}
// More CSS styling for chapters and their content...