Saleh is an experienced Web Developer and uses his knowledge and experience to guide people looking to learn Web Dev and new technologies
In this post, we will learn how to create an animated accordion in React JS. We will be creating a Simple Accordion that will have spring animations from React Spring. React Spring is a physics-based animation library that makes animation very easy to apply in React JS.
You can see the working accordion and the code on this sandbox.
Creating a React App
Firstly, create a React application. If you do not know how to do this, then check out this video.
Add the following code to your App.js. We will have a main div inside, which will have a heading and the accordion. The accordion itself will be a separate component that we will re-use. We will also import App.css (if it is not created by default, you can create it).
Next we will create the accordion component. The arrow icon will be from material-ui icons. You can install material ui icons with the following command:
npm install @mui/icons-material
We will pass the accordion content as a prop from App.js. 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. The title and text can be set for each accordion individually.
Style the Accordion
Our basic accordion is created. Now we need to create the functionality and style it. Add the following CSS to App.css.
Your accordion is basically created at this point. Only the functionality is left. At this point it will be looking like this.
For the open and close functionality, we will create a state called open inside Accordion.js. The state will be toggled from true to false and vice-versa, each time an accordion item is clicked. Then, we will create the animations using React Spring. The animations will have conditional styles that will only apply when the state is true.
Now when we click the accordion, it will toggle the state. But visually, nothing will happen. For this, we need to add the Spring Animations.
Now we will add the animations using React Spring. Install React Spring with the following command.
To add the animations, firstly import the useSpring hook. Next, we will create two different animations—one for the opening the accordion and the other for rotating the icon. To link the animations to the corresponding element, we will use the style property.
Note: We need to add animated before the element name in the tag.
Let's look at the above code step-by-step.
- Firstly, after importing useSpring, we are create a styles object. This is for changing the color of title if the accordion is open.
- Next, we have created the open animation that will increase the height of the accordion item to show the text if it is clicked. The opacity is to create a nice fade effect when the page loads. It is not necessary. The duration prop is self explanatory.
- The next animation is for the icon. When the accordion is opened, the icon will rotate and the color will change to blue.
Page Title Animation
This part is completely optional.
Basically, we will create a bounce animation for the page title once the page loads. Like before we will create a spring animation and add it to the h1 and also change the tag name to <animated.h1>.
You can play around with the mass, tension and friction properties to create more bounce, etc.
Your App.js will look like this.
And we are done!
Your working accordion will be looking like this now.
Explore Other Ways Too!
So there we have it. A simple animated accordion in React JS. There are many other ways of achieving this, so you can explore!
Thanks for reading!
This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.