Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format:
{object.map((o) => (
<Accordion key={o.id} title={o.question} className="item">
<div className="text"> { o.answer } <div/>
</Accordion>
))}
This results in the rendering of something similar to the following:
> Question 1
> Question 2
> Question 3
The functionality of toggling each question to reveal its answer is working smoothly, thanks to the utilization of hooks.
However, I aim to enhance the user experience by adjusting the opacity of all untoggled elements when one question is expanded. For instance, opening question 2 should highlight it while dimming out or reducing the opacity of question 1 and question 3. Although I could achieve this effect using :hover in CSS, it only triggers on hover events.
In essence, I need to dynamically modify the styling to emphasize the selected item and de-emphasize others. Yet, I am unsure how to implement this practically. Any guidance would be greatly appreciated as I suspect I might be overlooking a simple solution.
const Accordion = ({ title, children, opened = false }) => {
const [show, setShow] = useState(opened);
const rotation = classnames('icon', {
'rotate': show,
});
const content = classnames('contents', {
'closed': !show,
});
useEffect(() => {
setShow(opened);
}, [opened]);
const toggle = useCallback(() => {
setShow(!show);
}, [show]);
return (
<div className='titleContainer' onClick={toggle}>
<div className={rotations}>
<i className='icon' />
</div>
<h5 className='title'>{title}</h5>
</div>
<div className={content}>{children}</div>
);
};