Solution

To make accordion using ant design in react js, first install ant design library using npm install antd command then import and use Collapse component from it.

Snippet

In this snippet, see the short example of use Collapse and Panel component from ant design library.

<div
  style={{
    display: "block",
    width: 700,
    padding: 30
  }}
>
  <h4>Accordion using ant design in react js</h4>
  <Collapse>
    <Panel header="Accordion using Ant Design" key="1">
      <p>Accordion using Ant Design in react js</p>
    </Panel>
    <Panel header="Computer Science" key="2">
      <p>This is Best computer Science Portal</p>
    </Panel>
  </Collapse>
</div>

Example

In this example, we will import the Collapse component from antd library, use the Panel component, and provide attribute details to make accordion using ant design.

Let’s start coding…

App.js

import React from 'react'
import { Collapse } from 'antd';
  
const { Panel } = Collapse;
  
export default function App() {
  return (
    <div
      style={{
        display: "block",
        width: 700,
        padding: 30
      }}
    >
      <h4>Accordion using ant design in react js</h4>
      <Collapse>
        <Panel header="Accordion using Ant Design" key="1">
          <p>Accordion using Ant Design in react js</p>
        </Panel>
        <Panel header="Computer Science" key="2">
          <p>This is Best computer Science Portal</p>
        </Panel>
      </Collapse>
    </div>
  );
}

Output

Ant-design, accordion

Here, we are provided code sandbox links for the above program make accordion using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.