MUI is a popular open-source library of React components for building web applications. It provides a set of pre-designed UI components, such as buttons, forms, icons, typography, and more, that can be easily customized and integrated into any React application.
Accordion is a type of UI component that allows users to collapse and expand content sections based on their needs. It is a popular UI pattern that is used in many web applications to provide a more streamlined user experience. MUI Accordion API provides a wide range of options for building such accordion components with ease.
To use the Accordion component, you need to provide it with some content that will be collapsed and expanded as per the user’s interaction. The Accordion component has different types of props that allow you to modify the behavior, look, and feel of the accordion. You can use an expanded prop to determine whether the Accordion is expanded or collapsed.
Props:
- children – The content of the Accordion component, typically used to render AccordionDetails and AccordionSummary components.
- classes – Override or extend the styles applied to the component using the MUI withStyles higher-order component.
- defaultExpanded – If true, the Accordion will be expanded by default when the page loads.
- disabled – If true, the Accordion will be disabled and cannot be expanded or collapsed.
- disableGutters – If true, the Accordion will not have gutters (padding) on its sides.
- expanded – If true, the Accordion will be expanded and show its content.
- onChange – Callback function that is called when the Accordion changes its state (expanded or collapsed).
- square – If true, the Accordion will be square instead of rounded at the corners.
- sx – Custom styles for the Accordion component using the sx prop from the MUI theme, enabling the use of the MUI theme and custom styles together.
- TransitionComponent – The component used for the transition when the Accordion expands or collapses, typically an MUI Collapse or Grow component.
- TransitionProps – Additional props to pass to the TransitionComponent, such as timeout or appear.
CSS:
- root – The root element of the Accordion component, used to apply styles to the component as a whole.
- rounded – A Boolean value that determines if the Accordion should have rounded corners or not.
- expanded – A class applied to the Accordion when it is expanded, used to apply styles to the Accordion’s content when it is expanded.
- disabled – A class applied to the Accordion when it is disabled, used to apply styles to the Accordion when it cannot be interacted with.
- gutters – A class applied to the Accordion’s content wrapper, used to apply padding to the Accordion’s content.
- region – A CSS selector for the region of the Accordion, used to apply styles to a specific region of the Accordion, such as the header or content region.
Inheritance: The Accordion component inherits the props of the ‘Paper’ component, which means we can use all ‘Paper’ props in the accordion component. It can be used to target nested components.
Syntax:
Import Accordion API:
import { Accordion } from '@mui/material';
Creating React Project:
Step 1: Create a react app. Use the command below.
npx create-react-app project_name
Step 2: Go to your project directory 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:
Project Structure
Example 1: Basic MUI Accordion implementation.
Javascript
import * as React from "react"; import Accordion from "@mui/material/Accordion"; import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; import Typography from "@mui/material/Typography"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { Grid } from "@mui/material"; export default function SimpleAccordion() { return ( <> <h1 style={{ display: "flex", justifyContent: "center", color: "green" }}> Geeksforneveropen courses </h1> <Grid container spacing={2}> <Grid item xs={6}> <item> <div> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <Typography>What is a DSA course?</Typography> </AccordionSummary> <AccordionDetails> <Typography> This DSA course covers all topics. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header" > <Typography>Why learn DSA?</Typography> </AccordionSummary> <AccordionDetails> <Typography> Learning DSA is important for software developer. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header" > <Typography> Topics covered in DSA course? </Typography> </AccordionSummary> <AccordionDetails> <Typography> It covers arrays, linked lists, trees. </Typography> </AccordionDetails> </Accordion> </div> </item> </Grid> <Grid item xs={6}> <item> <div> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <Typography>What is an ML course?</Typography> </AccordionSummary> <AccordionDetails> <Typography> An ML course is a computer science course that teaches students about Machine Learning. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header" > <Typography>What topics are covered?</Typography> </AccordionSummary> <AccordionDetails> <Typography> supervised learning, unsupervised learning, deep learning, neural networks, decision trees. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header" > <Typography>How to prepare ?</Typography> </AccordionSummary> <AccordionDetails> <Typography> Start learning programming languages like Python or R. </Typography> </AccordionDetails> </Accordion> </div> </item> </Grid> </Grid> </> ); } |
Output:
Example 2: MUI Accordion implementation with icons in it.
Javascript
import React from "react"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import DesignServicesIcon from '@mui/icons-material/DesignServices'; import WebIcon from '@mui/icons-material/Web'; import AnalyticsIcon from '@mui/icons-material/Analytics'; import GroupsIcon from '@mui/icons-material/Groups'; import { Accordion, AccordionDetails, AccordionSummary, Typography, } from "@mui/material"; export default function MyAccordion() { return ( <> <h1 style={{ display: "flex", justifyContent: "center", color: "green" }}> Geeksforneveropen </h1> <h1 style={{ display: "flex", justifyContent: "center" }}> Services </h1> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <DesignServicesIcon /> <Typography>Web Design</Typography> </AccordionSummary> <AccordionDetails> <Typography> Web design is used for creating the visual look and feel of a website. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header" > <WebIcon /> <Typography>Web Development</Typography> </AccordionSummary> <AccordionDetails> <Typography> Web development involves creating the website and making it functional. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel3a-content" id="panel3a-header" > <AnalyticsIcon /> <Typography>SEO</Typography> </AccordionSummary> <AccordionDetails> <Typography> SEO is used to optimize a website to improve its visibility in search engine pages. </Typography> </AccordionDetails> </Accordion> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel3a-content" id="panel3a-header" > <GroupsIcon /> <Typography>Social Media Marketing</Typography> </AccordionSummary> <AccordionDetails> <Typography> It involves some social media platforms like Facebook, Twitter & Instagram to market your brand. </Typography> </AccordionDetails> </Accordion> </> ); } |
Output:
Reference: https://mui.com/material-ui/api/accordion/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
