I am using accordion material-mui. at first all of accordions are opened. when I scroll the page and I reach to the second accordion, I want to close the first accordion and when I reach to the third accordion , I want to close the previous ones and so on. the log of ref.current.offsetTop is always bigger than newScrollYPosition and when I change the if to > and it removes accordions[0].id but it did not close the accordion. How can I do that?
my simple code is in the below link.
https://stackblitz.com/edit/vitejs-vite-nzp98t?file=src%2FApp.tsx,src%2FApp.css&terminal=dev
import { Accordion as MuiAccordion } from '@mui/material'
export const Accordion = ({
className,
accordions,
scrollableContainerRef,
}: AccordionProps) => {
const [expandedIds, setExpandedIds] = useState<string[]>(
accordions.map(({ id }) => id)
)
const accordionRefs = useRef<(React.RefObject<HTMLDivElement> | null)[]>(
accordions.map(() => React.createRef())
)
const handleScroll = () => {
const newScrollYPosition = scrollableContainerRef.current?.scrollTop || 0
accordionRefs.current.forEach((ref) => {
if (ref.current) {
if (ref.current.offsetTop < newScrollYPosition) {
setExpandedIds((prevExpandedIds) =>
prevExpandedIds.filter((id) => id !== accordions[0].id)
)
}
}
})
}
useEffect(() => {
if (scrollableContainerRef.current) {
scrollableContainerRef.current.addEventListener('scroll', handleScroll)
}
return () => {
if (scrollableContainerRef.current) {
scrollableContainerRef.current.removeEventListener(
'scroll',
handleScroll
)
}
}
}, [scrollableContainerRef])
const accordionsList = useMemo(() => {
return accordions.map(({ id, title, content, disabled }, index) => (
<MuiAccordion
key={id}
disabled={disabled}
defaultExpanded={expandedIds.includes(id)}
ref={accordionRefs.current[index]}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} id={id}>
{title}
</AccordionSummary>
<AccordionDetails>{content}</AccordionDetails>
</MuiAccordion>
))
}, [accordions, expandedIds])
return (
<div className={classNames('accordion', className)}>{accordionsList}</div>
)
}
2
Answers
defaultExpanded
worked at the first render. useexpanded
instead.codes like