React Chakra UI Disclosure Accordian

Last Updated : 19 Feb, 2024

React Chakra UI Disclosure Accordion component offers a dynamic solution for presenting content in web applications. Leveraging Chakra UI’s robust capabilities, users can effortlessly integrate collapsible sections of content, providing an intuitive and organized user experience. Whether it’s showcasing FAQ sections, product features, or any other structured content, Chakra UI Disclosure Accordion streamlines information presentation, enhancing usability and engagement.

Prerequisites:

Approach:

We will build Disclosure Accordian in the following example using Chakra UI with React. We will be using components like Accordion, AccordionItem, AccordionButton and AccordionPanel with different size and style properties.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Step 4: After that we will install the Chakra UI Icon Library using the following command:

npm i @chakra-ui/icons

Project Structure:

Project Structure

The updated dependencies in package.json file will look like this:

"dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the basic example of the Chakra UI Disclosure Accordion:

Javascript

// App.js File
 
import React from 'react';
import { ChakraProvider, Box, Text } from '@chakra-ui/react';
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from '@chakra-ui/react'
 
function App() {
  return (
    <ChakraProvider>
      <Text
        color="#2F8D46"
        fontSize="2rem"
        textAlign="center"
        fontWeight="400"
        my="1rem">
        GeeksforGeeks - React JS Chakra UI concepts
      </Text>
      <Box w="40%" mx="auto" border="1px solid #E2E8F0">
        <Accordion>
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex='1' textAlign='left'>
                  Section 1 Data Science
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel pb={4}>
                A 360-degree Learning experience designed for geeks who wish to get hands-on Data Science.
                Mentored by industry experts; learn to apply DS methods and techniques, 
                and acquire analytical skills. So Master the Art of Data Science Now!
            </AccordionPanel>
          </AccordionItem>
 
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex='1' textAlign='left'>
                  Section 2 Data Structures
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel pb={4}>
              A data structure is a storage that is used to store and organize data. 
              It is a way of arranging data on a computer so that it can be 
              accessed and updated efficiently.
              There are different basic and advanced types of 
              data structures that are used in almost every program 
              or software system that has been developed. 
              So we must have good knowledge about data structures. 
            </AccordionPanel>
          </AccordionItem>
 
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex='1' textAlign='left'>
                  Section 3 Algorithm
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel pb={4}>
              The word Algorithm means “A set of rules to be followed in calculations 
              or other problem-solving operations” Or “A procedure for solving a 
              mathematical problem in a finite number of steps that
              frequently involves recursive operations “.
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
      </Box>
    </ChakraProvider>
  );
}
 
export default App;