Create an Animated Accordion in React JS !
Tags: react, javascript, beginners, webdev
Published: 2022-01-14 10:16:12

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.

>[Complete tutorial on Hubpages](https://discover.hubpages.com/technology/Animated-Accordion-with-React-JS).

---

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](https://dev.to/salehmubashar/animations-with-react-spring-21bd) - 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.

```javascript
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.

```javascript
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:

```javascript
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:
```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.

```javascript
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](https://discover.hubpages.com/technology/Animated-Accordion-with-React-JS)

You can see the working Accordion on this sandbox:

{% codesandbox dm5sp %}

----

[Complete tutorial on Hubpages](https://discover.hubpages.com/technology/Animated-Accordion-with-React-JS).
Thank you for Reading!