Create an Animated Accordion in React JS !

#react #javascript #beginners #webdev

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.

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;