On this article, we’ll harness the overall functions of React.js to create an accordion aspect — a person interface instrument that’s regularly utilized in internet and cell programs to organize and display content material in a user-friendly and space-efficient approach.

To get probably the most our of this text, you’ll want the next:

The next video displays our completed accordion aspect.

Challenge Setup

We’ll be the usage of React.js to create our accordion aspect. To make use of React.js, we’ll wish to create a React atmosphere, and we’ll do this by means of a command instructed.

Open your terminal utility and navigate to the desktop (or elsewhere should you want). Then run the next command to create your React app:

npx create-react-app accordion-component

As soon as the applications are put in, we’ll see one thing like the picture beneath.

Now if we take a look at our venture folder, we’ll discover a folder named /accordion-component/ with all of the applications put in.

Folder Construction

Open the brand new /accordion-component/ folder in a code editor. Additionally open the React utility within the browser. We will be able to do this by means of the in-built terminal in our code editor by means of typing the command npm run get started to run the appliance at the browser.

Word: should you’re the usage of Visible Studio, you’ll be able to use the shortcut (ctrl + shift + `) to open up the terminal. In case your code editor doesn’t have the function of an in-built terminal, you’ll be able to simply run instructions within the command instructed app.)

Let’s subsequent edit the pointless recordsdata and code blocks that can impede the execution of our utility. At first, open App.js and take away the entire header component that’s wrapped within the <div> component with a category title of App, so we’ve got an empty <div> component. Then open App.css and index.css and delete the contents of each recordsdata. (In the event you view the internet web page yet again, you’ll see that it’s now clean, which is solely what we wish for now.)

Subsequent, let’s create a brand new folder known as /AccordionComponent/ below the /src/ folder listing. Throughout the /AccordionComponent/ folder, create a record known as Accordion.js for the elements and any other record named AccordionData.js to retailer the textual content for use for our accordion. Then pass to the App.js record and import the Accordion.js record. After the record has been imported, we render it within the <div> component like so:

import './App.css';
import Accordion from './AccordionComponent/Accordion';

serve as App() {
 go back (
  <div className="App">
   <Accordion />
  </div>
 );
}

export default App;

After that’s completed, pass to the Accordion.js record and create an element known as AccordionItem. Throughout the go back key phrase, we’ll create a heading component with “Accordion” because the content material (<h1>Accordion</h1>), and beneath that any other aspect known as Accordion. After doing that, we’ll render our AccordionItem aspect within that of the primary Accordion, ensuring the rendered aspect is wrapped in a <div> component with a category title of container. We then export the primary Accordion aspect. Now we now have one thing like this:

import React from 'react';


const AccordionItem = () => {
  go back(
    <h1>Accordion</h1>
  )
}


const Accordion = () => {
 go back (
  <div>
    <AccordionItem />
  </div>
 )
}

export default Accordion;

If we view our internet web page, we’ll see our heading at the display.

We’ll subsequent create an array of items containing the questions and solutions textual content within the AccordionData.js record. By way of storing our accordion knowledge in an array of items, we make certain that the information is dynamically saved and the accordion aspect is reusable. Underneath is the accordion knowledge. You’ll replica and paste it for your AccordionData.js record immediately:

const knowledge = [
  {
   question: 'What are accordion components?',
   answer: 'Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.' ,
  },
  {
   question: 'What are they used for?',
   answer: 'They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.',
  },
  {
   question: 'Accordion as a musical instrument',
   answer: 'The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.',
  },
  {
   question: 'Can I create an accordion component with a different framework?',
   answer: 'Yes of course, it is very possible to create an accordion component with another framework.',
  }
 ];

 export default knowledge;

Within the code above, we now have an array of items keeping the information that might be displayed in our accordion aspect. The query assets incorporates the query or header textual content, whilst the reply assets incorporates the solution or content material that looks when the query is clicked or expanded. Be sure you import the aspect within the Accordion.js record. That’s desirous about the AccordionData.js record.

Accordion Part Format

Let’s create the structure of our accordion aspect.

We first have to put in react-icons to our venture from the npm registry:

npm set up react-icons

We additionally wish to import useState and useRef hooks. We will be able to do this by means of pasting this into the highest of the record:

import React, { useRef, useState } from 'react'

The HTML construction might be rendered within the AccordionItem aspect. We’ll cross 4 props into the AccordionItem aspect: query, reply, isOpen, and onClick.

Let’s spoil down the props to peer what they’ll be wanted for:

• query. This prop represents the textual content or content material for the query a part of the accordion merchandise.
• reply. This prop represents the textual content or content material for the solution a part of the accordion merchandise.
• isOpen. This prop is a Boolean that signifies whether or not the accordion merchandise is these days open (expanded) or closed (collapsed). It controls whether or not the solution content material is visual or hidden.
• onClick. This prop is a callback serve as that will get done when the person interacts with the accordion merchandise. It’s typically used to toggle the isOpen state when the person clicks at the merchandise to make bigger or cave in it.

The AccordionComponent Frame

On the best of the Accordion.js record, remember to import the arrow icon from the react-icons bundle, like this:

import { RiArrowDropDownLine } from 'react-icons/ri'

This would be the construction of a unmarried accordion merchandise:

const AccordionItem = ({ query, reply, isOpen, onClick }) => {
 const contentHeight = useRef()
  go back(
    <div className="wrapper" >
    <button className={`question-container ${isOpen ? 'energetic' : ''}`} onClick={onClick} >
     <p className='question-content'>{query}</p>
     <RiArrowDropDownLine className={`arrow ${isOpen ? 'energetic' : ''}`} /> 
    </button>

     <div ref={contentHeight} className="answer-container" genre={
          isOpen
          ? { peak: contentHeight.present.scrollHeight }
          : { peak: "0px" }
         }>
      <p className="answer-content">{reply}</p>
     </div>
   </div>
  )
}

On this code snippet, the accordion merchandise sits inside of a guardian <div> with a category title wrapper. This construction permits for showing a query and its reply in a collapsible method.

We retailer our useRef hook in a variable known as contentHeight so it may be handed into the ref characteristic of our answer-container component. We do this so we’ll be capable to dynamically regulate the peak of the container in keeping with the solution content material’s scroll peak.

Let’s spoil down the code construction.

• Button component (<button>). That is the interactive a part of the accordion merchandise that customers click on to toggle the solution’s visibility. It has a category title question-container. The category title is conditionally set to energetic if the isOpen prop is right, which is used to genre the button otherwise when the solution is open.

• Query content material. The query content material is composed of a <p> component with a category question-content. The textual content for the query is taken from the query prop.

• Arrow Icon (<RiArrowDropDownLine />). An arrow icon used for toggling is exhibited to the correct of the query. The category title is conditionally set to energetic if the isOpen prop is right, which can be utilized to rotate or genre the arrow otherwise when the solution is open.

• Solution div. Following the <button>, there’s a <div> component with the category title answer-container. This div has an ref characteristic set to the contentHeight variable, which permits it to measure its scrollHeight. The manner characteristic is used to dynamically set the peak of this container in keeping with whether or not the object is open or closed. When isOpen is right, it’s going to have a peak equivalent to its content material’s scrollHeight, making the solution visual. When isOpen is fake, it has a peak of 0px, hiding the solution content material.

• Solution content material. The solution content material is composed of a <p> component with elegance answer-content. The textual content for the solution is taken from the solution prop.

Styling our Accordion Part

Now that we’re completed with the markup, let’s genre our accordion aspect. The styling will also be discovered within the code block beneath:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

frame {
  background-color: #f2f2f2;
}

.container {
  max-width: 650px;
  width: 100%;
  place: absolute;
  best: 50%;
  left: 50%;
  grow to be: translate(-50%, -50%);
}

.wrapper {
  border-bottom: 1px cast black;
  overflow: hidden;
}

.wrapper .question-container {
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  show: flex;
  align-items: middle;
  justify-content: space-between;
  font-weight: 500;
  font-size: 20px;
  background: clear;
  border: none;
  cursor: pointer;
}

.question-container.energetic {
  coloration: #1db954;
  background-image: linear-gradient(90deg,clear,rgba(0,0,0,0.04),clear);
}

.wrapper .question-container:hover {
  background-image: linear-gradient(90deg,clear,rgba(0,0,0,0.04),clear);
}

.wrapper .arrow {
  font-size: 2rem;
  transition: .5s ease-in-out;
}

.arrow.energetic {
  rotate: 180deg;
  coloration: #1db954;
}

.wrapper .answer-container {
  padding: 0 1rem;
  transition: peak .7s ease-in-out;
}

.wrapper .answer-content {
  padding: 1rem 0;
  font-size: 20px;
  font-style: italic;
}

Because of the styling above, we’ve got the description of our accordionItem. Now let’s import the information from our AccordionData record and claim the fundamental functionalities of our accordion aspect. We do this within the primary Accordion aspect.

Primary accordion aspect construction

The code beneath defines the useful aspect named Accordion:

const Accordion = () => {
 const [activeIndex, setActiveIndex] = useState(null);

 const handleItemClick = (index) => {
  setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
 };

 go back (
  <div className='container'>
    {knowledge.map((merchandise, index) => (
    <AccordionItem
     key={index}
     query={merchandise.query}
     reply={merchandise.reply}
     isOpen={activeIndex === index}
     onClick={() => handleItemClick(index)}
    />
   ))}
  </div>
 )
};

export default Accordion;

The aim of this aspect is to create the accordion-style interface that shows an inventory of things, each and every consisting of a query and its corresponding reply. The person can click on on a query to make bigger or cave in its reply. Let’s spoil down the code step-by-step.

• const [activeIndex, setActiveIndex] = useState(null);. This line units a work of aspect state the usage of the useState hook. activeIndex represents the index of the these days energetic (open) accordion merchandise, or null if no merchandise is open. setActiveIndex is the serve as used to replace this state.

• const handleItemClick = (index) => { ... }. ThehandleItemClick serve as is chargeable for dealing with clicks on accordion goods. It takes an index parameter, which represents the index of the object that was once clicked.

  Throughout the serve as, setActiveIndex is known as with a serve as that toggles the activeIndex state. If the clicked merchandise’s index (index) fits the present energetic index (prevIndex), it units activeIndex to null, successfully remaining the object. In the event that they don’t fit, it units activeIndex to the clicked merchandise’s index, opening it.

  This method guarantees that just one accordion merchandise will also be opened at a time, as a result of if we open one accordion merchandise, it closes any prior to now opened accordion merchandise.

• The go back remark. This aspect returns JSX that defines the construction of the accordion interface. The outermost <div> with the category title container is the container for all accordion goods.

• {knowledge.map((merchandise, index) => ( ... ))}. This code maps over an array known as knowledge that’s retrieved from the AccordionData.js record. For each and every merchandise within the knowledge array, it renders an AccordionItem aspect. The key prop is ready to index to verify each and every merchandise has a singular key for React’s rendering optimization.

  The query, reply, isOpen, and onClick props are handed to the AccordionItem aspect. The query and reply props include the textual content to be displayed for each and every merchandise. The isOpen prop is ready to true if the object’s index fits the these days energetic index (indicating that it will have to be open), and the onClick prop is a callback serve as that triggers the handleItemClick serve as when the object is clicked.

• export default Accordion;. This line exports the Accordion aspect in order that it may be imported and utilized in different portions of our utility. We’ve prior to now rendered the aspect in our App.js record.

In abstract, the Accordion aspect manages the state of the these days energetic accordion merchandise and makes use of this state to keep watch over the outlet and shutting conduct. It dynamically generates an inventory of AccordionItem elements in keeping with the information received, permitting customers to have interaction with the accordion interface by means of clicking on each and every of the questions to show or disguise their solutions.

Our Completed Product

We have a good looking and completely useful accordion aspect! 🥳 🎉 All the supply code for this educational is to be had on CodeSandbox.

Conclusion

On this article, we’ve checked out learn how to make the most of React.js to create a dynamic and user-friendly accordion aspect. Accordions are a not unusual person interface component for smartly organizing and showing content material.

We started by means of making a React venture, organizing the aspect, and styling it for a completed look. We went into the interior workings of the machine, together with state control and coping with person interactions. As well as, for scalability and reusability, we coated the concept that of storing the accordion knowledge in any other record.

Optimistically you presently have a cast figuring out of learn how to increase a feature-rich accordion aspect with React.js. Satisfied coding!