MUI Accordion at the bottom of the window

Question

I'm looking for an material react expandable that stays on footer and opens when clicked from bottom to top.

All the material accordions / collapsible expand from top to bottom which make the page grow. Example : https://materializecss.com/collapsible.html

I was able to find something similar using HTML and JS, but looking for out of box react / material components.

Answer 1

Looks like you want the Accordion component. To make it stick at the bottom, set the position to fixed and bottom to 0.

<Accordion
  sx={{
    position: 'fixed',
    bottom: 0,
  }}
>
  <AccordionSummary>
    {...}
  </AccordionSummary>
  <AccordionDetails>
    {...}
  </AccordionDetails>
</Accordion>