Currently, I am in the process of developing an application with three menu tabs, each represented by an accordion comprising a menu title and content. The issue I am facing is that when clicking on any menu title, all content divs are displayed simultaneously. My goal is to have each menu title trigger only the content div associated with it, activating the active state exclusively for that specific div.
The toggle accordion function I have formulated opens all content windows simultaneously. Upon clicking any menu title, all corresponding content is revealed. Below is a simplified version of my function:
function PlayerApp(props) {
const [setActive, setActiveState] = useState("");
const [setHeight, setHeightState] = useState("0px");
const content = useRef(null);
function toggleAccordion() {
setActiveState(setActive === "" ? "active" : "");
setHeightState(
setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
);
}
return (
<div className="content">
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text content here </div>
</div>
</div>
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text here </div>
</div>
</div>
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text content here </div>
</div>
</div>
<div className="content-title">
<button className={`menu_title1 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 1:</p>
</button>
</div>
<div className="content-title">
<button className={`menu_title2 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 2:</p>
</button>
</div>
<div className="content-title">
<button className={`menu_title3 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 3:</p>
</button>
</div>
</div>
);
}
export default PlayerApp;
Although I have designated unique classes for each button, they still all trigger the active state for every div upon clicking. I am seeking guidance on how to modify my function to ensure that each button causes a distinct response for its associated accordion window.
How can I adjust my function so that clicking on each button results in a unique response specific to that accordion window?