Create an Accordion Component in React
Today we’ll show you how to create an accordion component in React JS. In other words, we can say how to create a collapsible component in ReactJS with expand and collapse options.
In this article, we will create a reusable component where we can manage the single accordion/collapsible box based on the given props.
Steps to implement an accordion component
- Create react application
- Import font-awesome library
- Design the accordion/collapsible panel
- Import panel in the main component
- Output
1. Create react application
Let’s create a react application using create-react-app. If you don’t know how to do it then refer to this link.
We have used the following command to create a react app.
1 | npx create-react-app accordion-component-react |
2. Import font-awesome library
To display expand and collapse icons, we will use the font awesome library. If you want to use the pure css or image icon then you can ignore this step.
Add the below stylesheet in the head part of the public/index.html file.
1 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> |
3. Design the accordion/collapsible panel
In the next step, we will create a reusable accordion component with expand and collapse icons.
Check out the following code to create an accordion component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React, { useState } from 'react'; const Accordion = ({ children, title, isExpand = false }) => { const [expand, setExpand] = useState(isExpand); return ( <div className="box"> <div className="title-box" onClick={() => setExpand(expand => !expand)}> <span className="title">{title}</span> <span className="icon"><i className={`fa fa-play-circle${!expand ? ' down' : ''}`}></i></span> <div className="clearfix"></div> </div> {expand && <div className="content">{children}</div>} </div> ) } |
In the above code, we will receive the several attributes via props such as title, isExpand and children. We used the default parameter as isExpand = false to manage the default behaviour of the panel.
To manage the expand and collapse features, we used the state variable and here we used the react hooks to manage the state using the useState method.
Use the following CSS to design the panel.
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .clearfix { clear: both; } .box { width: 500px; color: #333; border: 1px solid #ddd; } .title-box { cursor: pointer; padding: 15px; background-color: #f5f5f5; } .title { width: calc(100% - 20px); } .icon { width: 20px; display: flex; color: #666; float: right; } .icon .fa { font-size: 20px; transition: all 0.1s; transform: rotate(90deg); } .icon .fa.down { transform: rotate(0deg); } .content { padding: 15px; border-top: 1px solid #ddd; } |
4. Import panel in the main component
Now we will use the accordion panel in the main component same as the others.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function App() { return ( <div> <h3>Accordion Component - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3> <Accordion title="What is Lorem Ipsum?"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </Accordion> <Accordion isExpand={true} title="Why do we use it?"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </Accordion> <Accordion title="Where does it come from?"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </Accordion> <Accordion title="Where can I get some?"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary. </Accordion> </div> ); } |
You can see we have set the isExpand={true} for the second accordion so at the initial time it will be expanded.
5. Output
Finally, let’s combine all codes together and see how it looks.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import React, { useState } from 'react'; function App() { return ( <div> <h3>Accordion Component - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3> <Accordion title="What is Lorem Ipsum?"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </Accordion> <Accordion isExpand={true} title="Why do we use it?"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </Accordion> <Accordion title="Where does it come from?"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </Accordion> <Accordion title="Where can I get some?"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary. </Accordion> </div> ); } const Accordion = ({ children, title, isExpand = false }) => { const [expand, setExpand] = useState(isExpand); return ( <div className="box"> <div className="title-box" onClick={() => setExpand(expand => !expand)}> <span className="title">{title}</span> <span className="icon"><i className={`fa fa-play-circle${!expand ? ' down' : ''}`}></i></span> <div className="clearfix"></div> </div> {expand && <div className="content">{children}</div>} </div> ) } export default App; |
Run the project and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
