Currently, I am creating an accordion component that is supposed to have a smooth transition effect when opened and closed. However, while the transition works smoothly when the accordion opens, it seems to have some issues when it comes to closing.
I have tried experimenting with adding the transition value to different classes within the accordion, but so far, I have been unable to resolve the problem.
If anyone could offer some guidance or assistance in this matter, it would be greatly appreciated.
Here is a link to the Fiddle for reference.
JavaScript:
import React, { useEffect, useRef, useState } from "react";
import cx from "classnames";
import styles from "./accordion.module.scss";
export const Accordion = ({ bodyText, headerText }) => {
// Rest of the JavaScript code remains the same
CSS
@import "../../colors.scss";
/* Customized CSS styling provided for the accordion component */
.accordion {
// CSS styling for the accordion component
}