how to make the material UI expansion panels open upwards when expanded instead expanding downwards?

Question

Problem:

• Upon expanding expansion-panel, it should expand upwards to show more info rather than expanding down which makes user to scroll down again.

Answer 1

If you are using Angular Material Component's Expansion Panel,
then you can use the following css for making the expansion-panel content to be present above the mat-expansion-panel-header in styles.css file.

.mat-expansion-panel {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel-header {
  order: 2;
}

StackBlitz - Angular Material Demo

Update 1 : React's Material UI Demo

Answer 2

If you dont mind panel moving header upwards after expantion, you could dock whole expansion panel / accordeon to bottom and use absolute positioning.

https://stackblitz.com/edit/angular-b11huf?embed=1&file=app/expansion-overview-example.css

However keep in mind that panel title, header and description order is important for correct displaying expansion panel and displaying just header at the bottom all the times is going to be painfull. Good Luck.