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
Links
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.
Happy Coding,
I hope the above example with help you to do your task.