Hi guys
In this post we will learn how to create an animated accordion in React JS. The animations will be created using React Spring.
Basically, we will create a simple Accordion in React JS. The Accordion will be completely Animated as well. We will create the animations with React Spring - an amazing spring based react animation library.
App.JS
The App.js will be pretty basic. We will, have a main div inside of which we will have a heading and the accordion. The Accordion itself will be a separate component that we will re-use.
import React from "react";
import "./App.css";
function App() {
return (
<div className="main">
<h1>React Accordion</h1>
<div className="accordion">
</div>
</div>
);
}
export default App;
Accordion Component
Next we will create the Accordion Component.
import { React, useState } from "react";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
function Accordion(props) {
return (
<div className="accordion__item">
<div className="accordion__header">
<h4>{props.title}</h4>
<i>
<ExpandMoreIcon />
</i>
</div>
<p className="accordion__content">{props.text}</p>
</div>
);
}
export default Accordion;
The icon is from meterial-ui icons. We will pass the Accordion content as a prop from App.js.
Accordion Content
Inside app.js, we will import the Accordion and call it as many times we want. Basically we are reusing the component but we can change the text with the help of the props.
App.js:
import React from "react";
import "./App.css";
import Accordion from "./Components/Accordion";
function App() {
return (
<div className="main">
<h1>React Accordion</h1>
<div className="accordion">
<Accordion
title="Item 1 - Lorem ipsum dolor sit amet"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
/>
<Accordion
title="Item 2 - Lorem ipsum dolor sit amet"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
/>
<Accordion
title="Item 3 - Lorem ipsum dolor sit amet"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
/>
<Accordion
title="Item 4 - Lorem ipsum dolor sit amet"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
/>
</div>
</div>
);
}
export default App;
Styling the Accordion
Add the following CSS to App.css:
* {
margin: 0;
padding: 0;
background-color: #1c2938;
}
.main {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
flex-direction: column;
row-gap: 20px;
}
h1 {
margin: 10px;
font-size: 40px;
color: rgb(255, 255, 255);
}
.accordion {
margin: 30px;
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
}
.accordion__item {
width: 40%;
max-height: 25px;
padding: 17px 10px;
border-bottom: 1px solid #c9c9c9;
color: #fff;
overflow: hidden;
cursor: pointer;
}
.accordion__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion__header h4 {
transition: 0.2s ease-in-out;
font-size: 16px;
font-weight: 400;
margin-bottom: 10px;
}
.accordion__header i {
transition: 0.2s ease-in-out;
transform-origin: center;
margin-bottom: 10px;
}
.accordion__header:hover h4 {
color: #10d6f5!important;
}
.accordion__header:hover i {
color: #10d6f5;
}
.accordion__content {
margin: 5px;
}
@media (max-width:600px) {
h1 {
font-size: 30px;
}
.accordion__item {
width: 80%;
}
}
We now have our accordion created, but we need to create the animations and toggle function.
Basically we will create a state that will be toggled from true to false and vice-versa, each time an accordion item is clicked. The react spring animation will have conditional styles for when the state is true so that the accordion opens.
import { React, useState } from "react";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
function Accordion(props) {
const [open, setOpen] = useState(false);
//toggle accordion function
let toggleHandler = (e) => {
//switch state
setOpen(!open);
};
return (
<div className="accordion__item" >
<div className="accordion__header" onClick={toggleHandler}>
<h4 >{props.title}</h4>
<i>
<ExpandMoreIcon />
</i>
</div>
<p className="accordion__content">{props.text}</p>
</div>
);
}
export default Accordion;
You can read the complete tutorial here
You can see the working Accordion on this sandbox:
Complete tutorial on Hubpages.
Thank you for Reading!
Top comments (2)
You should say you are using
react-spring
for thisand i did mention it many times in the article