An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- TutsPlus - Code
- Just Creative
- Joshua Blankenship
- Noupe
- My Ink Blog
- Wal You
- CSS Tricks
- Daily Now
- Dev To
- The Verge
Help Webnuz
Referal links:
Create an Animated Accordion in React JS !
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:
Thank you for Reading!
Original Link: https://dev.to/salehmubashar/animated-accordion-in-react-js-1a6h
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To