CODEWITHSUNDEEP
reactjsnext.jsmaterial-ui
Free Me
Free Me

Reputation: 195

Scroll accordion into view and open on page load

I have a FAQ page with accordion. The behavior I want is when user clicks on a link to localhost:3000/faq#why-choose-us for example, the page should scroll to the accordion element with why-choose-us id and open the accordion. Currently, if I'm already on FAQ and click on a question, it would set the URL to localhost:3000/faq#title-of-question and open the accordion, but not when clicking on a link to here. Here is the code:

{data.elements
            .map((feature, index) => (
              <Accordion
                id={`${feature.slug}`}
                key={index}
              >
                <a style={{ all: 'unset' }} href={`#${feature.slug}`}>
                  <AccordionSummary
                    expandIcon={<Iconify icon={ExpandMoreIcon} />}
                    aria-controls={`panel-content-${index}`}
                    id={`panel-header-${index}`}
                  >
                    <Typography sx={{ fontWeight: 600 }}>{feature.title}</Typography>
                  </AccordionSummary>
                </a>
                <AccordionDetails>
                  <Typography>{feature.description}</Typography>
                </AccordionDetails>
              </Accordion>
            ))}
}

A page with the behavior I want.

Upvotes: 0

Views: 1016

Answers (1)

dbonev
dbonev

Reputation: 402

When open the why-choose-us page use scrollIntoView: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView To show the accordion on the screen.

Then set expanded property for the accordion to true: https://mui.com/material-ui/api/accordion/

About clicking on a link you should use useEffect hook to determine the component initialization and inside the callback use the above approaches.

Upvotes: 1

Related Questions