Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

ReactJS UI Ant Design Collapse Component

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Ant Design Library has this component pre-built, and it is very easy to integrate as well. The collapse component is used as a content area that can be collapsed and expanded. We can use the following approach in ReactJS to use the Ant Design Collapse Component.

Collapse Props:

  • accordion: It is used to collapse renders as Accordion if this value is set to true.
  • activeKey: It is used to denote the key of the active panel.
  • bordered: It is used to toggle the rendering of the border around the collapse block.
  • collapsible: It is used to specify whether the panel of children or trigger area to be collapsible or not.
  • defaultActiveKey: It is used to denote the key of the initial active panel.
  • destroyInactivePanel: It is used to destroy the Inactive panel.
  • expandIcon: It is used to allow customization of the collapse icon.
  • expandIconPosition: It is used to set expand icon position.
  • ghost: It is used to make the collapse background transparent and borderless.
  • onChange: It is a callback function that is triggered when the active panel is changed.

Collapse.Panel Props

  • collapsible: It is used to specify whether the panel or trigger area to be collapsible or not.
  • extra: It is used to denote the extra element in the corner.
  • forceRender: When clicking on the header, it is used to force rendering of content on panel, instead of lazy rending.
  • header: It is used to define the title of the panel.
  • key: It is the unique key for identifying the panel.
  • showArrow: If true, it will show an arrow icon.

Creating React Application And Installing Module:

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

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername
  • Step 3: After creating the ReactJS application, Install the required module using the following command:

    npm install antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.


import React from 'react'
import "antd/dist/antd.css";
import { Collapse } from 'antd';
const { Panel } = Collapse;
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
      <h4>ReactJS Ant-Design Collapse Component</h4>
        <Panel header="GeeksforGeeks" key="1">
<p>Greetings from GeeksforGeeks</p>
        <Panel header="Computer Science" key="2">
<p>This is Best computer Science Portal</p>

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

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


My Personal Notes arrow_drop_up
Last Updated : 30 May, 2021
Like Article
Save Article
Similar Reads
Related Tutorials