React MUI Collapse API

The Material-UI is an open-source library for Creating user interfaces with Material Design principles in React. Material Design is a design language that provides a consistent look and feel on all platforms and devices. Material-UI provides a set of pre-built components, making it easier for developers to create beautiful and consistent UI.

The Material-UI Collapse component is a way to hide and reveal content on a web page using a smooth transition. It is built on top of the Transition component in Material-UI.
It is easy to use and customize and provides several props and utility functions that can be used to control the animation programmatically. It can be used with components like a Card and list.

Import Collapse API:

import Collapse from '@mui/material/Collapse';
// or
import { Collapse } from '@mui/material';

Props List:

• addEndListener: It allows us to add a custom transition end trigger.
• children:  It is used to denote the content node to be Collapsed.
• classes: It is to override or extend the styles applied to the components.
• collapsedSize: It is used to change the width or height of the container when collapsed. By default, it’s set to “0px”.
• component: It is the component used for the root node.
• easing: It’s a transition timing function.
• in: It takes a boolean value to transition. The default is set to false and can be transitioned in when set to “true”.
• orientation: It is the orientation of the transition. By default, it is set to vertical and can be changed to horizontal. 
• sx: This prop is used to add custom CSS styles.
• timeout: It is used to specify a single timeout for all transitions, or individually with an object.

CSS Rules:

• root(MuiCollapse-root): The style applied to the root element.
• horizontal (MuiCollapse-horizontal): It is applied to the root element if the orientation=”horizontal”.
• entered(MuiCollapse-entered): It is applied to the root element when the transition has entered.
• hidden(MuiCollapse-hidden): It is applied to the root element when the transition has exited.
• wrapperInner(MuiCollapse-wrapperInner):  The styles are applied to the inner wrapper element.

Inheritance: The props from the Transition component from the react-transition-group are also available on Collapse. Various transitions can be achieved with this component.

Approach: Create a React project and install React MUI module.

Creating React Project:

Step 1: Create a react app. Use the command below.

npx create-react-app project_name

Step 2: Move into the folder to perform different operations.

cd project_name

Step 3: Installing MUI modules.

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/icons-material

Project Structure: 

Example 1: We are creating a UI that shows React MUI Collapse API.

• Filename: App.js

Javascript

import { useState } from "react";
import Card from "@mui/material/Card";
import Collapse from "@mui/material/Collapse";
import CardHeader from "@mui/material/CardHeader";
import Container from "@mui/material/Container";
import CardContent from "@mui/material/CardContent";
import KeyboardArrowDownIcon from
    "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from
    "@mui/icons-material/KeyboardArrowUp";
import IconButton from "@mui/material/IconButton";

export default function App() {
    const [open, setOpen] = useState(false);
    return (
        <>
            <h1 style={{
                display: "flex",
                justifyContent: "center",
                color: "green"
            }}>
                GeeksForGeeks
            </h1>
            <Card sx={{
                minWidth: 300,
                border: "1px solid rgba(211,211,211,0.6)"
            }}>
                <CardHeader
                    title="Complete Interview Preparation"
                    action={
                        <IconButton
                            onClick={() => setOpen(!open)}
                            aria-label="expand"
                            size="small"
                        >
                            {open ? <KeyboardArrowUpIcon />
                                : <KeyboardArrowDownIcon />}
                        </IconButton>
                    }
                ></CardHeader>
                <div style={{
                    backgroundColor: "rgba(211,211,211,0.4)"
                }}>
                    <Collapse in={open} timeout="auto"
                        unmountOnExit>
                        <CardContent>
                            <Container sx={{
                                height: 100,
                                lineHeight: 2
                            }}>
                                An interview-centric course
                                designed to prepare you for
                                the role of SDE for both
                                product and service-based
                                companies. A placement
                                preparation pack built with
                                years of expertise. Learn
                                Resume Building, C++, Java,
                                DSA, CS Theory concepts,
                                Aptitude, Reasoning, LLD,
                                and much more!
                            </Container>
                        </CardContent>
                    </Collapse>
                </div>
            </Card>
        </>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: We are creating a UI that shows React MUI Collapse API with list.

Filename: App.js

Javascript

import * as React from "react";
import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import DraftsIcon from "@mui/icons-material/Drafts";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";

import PersonIcon from "@mui/icons-material/Person";
import EditIcon from "@mui/icons-material/Edit";
import FaceRetouchingNaturalIcon from
    "@mui/icons-material/FaceRetouchingNatural";
import ArticleIcon from "@mui/icons-material/Article";
import LogoutIcon from "@mui/icons-material/Logout";

export default function NestedList() {
    const [open, setOpen] = React.useState(true);

    const handleClick = () => {
        setOpen(!open);
    };

    return (
        <>
            <h1 style={{ color: "green" }}>
                GeeksForGeeks</h1>

            <List
                sx={{
                    width: "100%", maxWidth: 360,
                    bgcolor: "background.paper"
                }}
                component="nav"
                aria-labelledby="nested-list-subheader"
                subheader={
                    <ListSubheader component="div"
                        id="nested-list-subheader">
                        Setting
                    </ListSubheader>
                }
            >
                <ListItemButton>
                    <ListItemIcon>
                        <PersonIcon />
                    </ListItemIcon>
                    <ListItemText primary="My Profile" />
                </ListItemButton>
                <ListItemButton>
                    <ListItemIcon>
                        <DraftsIcon />
                    </ListItemIcon>
                    <ListItemText primary="My Courses" />
                </ListItemButton>
                <ListItemButton onClick={handleClick}>
                    <ListItemIcon>
                        <EditIcon />
                    </ListItemIcon>
                    <ListItemText primary="Edit" />
                    {open ? <ExpandLess /> : <ExpandMore />}
                </ListItemButton>
                <Collapse in={open} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        <ListItemButton sx={{ pl: 4 }}>
                            <ListItemIcon>
                                <FaceRetouchingNaturalIcon />
                            </ListItemIcon>
                            <ListItemText primary="Edit Profile" />
                        </ListItemButton>

                        <ListItemButton sx={{ pl: 4 }}>
                            <ListItemIcon>
                                <ArticleIcon />
                            </ListItemIcon>
                            <ListItemText primary="Edit Articles" />
                        </ListItemButton>
                    </List>
                </Collapse>

                <ListItemButton>
                    <ListItemIcon>
                        <LogoutIcon />
                    </ListItemIcon>
                    <ListItemText primary="Logout" />
                </ListItemButton>
            </List>
        </>
    );
}

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://mui.com/material-ui/api/collapse/