Accordion Template using ReactJS and Tailwind
Last Updated :
24 Apr, 2025
An Accordion is a component which can show data in form of collapsing and expanding. This is very useful in places where we have less amount of space available and only necessary information is to be provided to the end user. It provides ease of access in displaying data as user is shown only the required data and other components are hidden.
The final feature will look like:
Basic features in an accordion are:
- Title: This contains the information which is always displayed to the user
- Content/Data: This is the information which the user selects to view
- Collapse/Expand: A feature using which user can collapse and expand selected information
- Transition: Smooth transitions during expanding/collapsing which enhances user experience
Prerequisites:
Approach:
- Set up a basic react project and install the required dependencies.
- Create the basic layout consisting of a Navbar and Welcome slide.
- Style the components using Tailwind.
- Pass the data dynamically in the components and render it on the screen.
Step to create the project
Step 1: Set up the project using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Install the required dependencies using the command
npm install -D tailwindcss
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 6: Create a folder called components in src directory and add the file Accordion.js and Navbar.js
Project Structure:
The updated dependencies in package.json will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}Example: Add the following code in respective files:
JavaScript
// App.js
import logo from './logo.svg';
import './App.css';
import Accordion from './components/Accordion';
import { useState } from 'react';
import Navbar from './components/Navbar';
const App = () => {
const [accordions, setAccordion] = useState([
{
key: 1,
title: 'What is GeeksforGeeks?',
data: `GeeksforGeeks is a one stop solution
for all computer science students.`,
isOpen: false
},
{
key: 2,
title: 'What GeeksforGeeks offer us?',
data: `GeeksforGeeks offers Free Tutorials,
Millions of Articles, Live, Online and
Classroom Courses,Frequent Coding Competitions,
Webinars by Industry Experts, Internship
opportunities and Job Opportunities.`,
isOpen: false
},
{
key: 3,
title: 'Which is the best portal to study Computer Science?',
data: `GeeksforGeeks is the best Computer Science portal
for geeks. It contains well written, well thought
and well explained computer science and programming
articles.`,
isOpen: false
},
]);
const toggleAccordion = (accordionkey) => {
const updatedAccordions = accordions.map((accord) => {
if (accord.key === accordionkey) {
return { ...accord, isOpen: !accord.isOpen };
} else {
return { ...accord, isOpen: false };
}
});
setAccordion(updatedAccordions);
};
return (
<div>
<Navbar/>
<div className="p-2 m-8">
<h2 className='text-2xl mb-2 mx-auto text-green-800'>Accordion Using React and Tailwind</h2>
{accordions.map((accordion) => (
<Accordion
key={accordion.key}
title={accordion.title}
data={accordion.data}
isOpen={accordion.isOpen}
toggleAccordion={() => toggleAccordion(accordion.key)}
/>
))}
</div>
</div>
);
};
export default App;
// Accordion.js
export default function Accordion(props) {
return (
<div className="border rounded-md mb-1">
<button
className="w-full p-4 text-left bg-gray-200
hover:bg-gray-300 transition duration-300"
onClick={props.toggleAccordion}
>
{props.title}
<span className={`float-right transform ${props.isOpen ?
'rotate-180' : 'rotate-0'}
transition-transform duration-300`}>
▼
</span>
</button>
{props.isOpen && (
<div className="p-4 bg-white">
{props.data}
</div>
)}
</div>
);
};
// Navbar.js
export default function Navbar() {
return (
<div>
<nav classNameName="bg-white fixed w-full
z-20 top-0 left-0
border-b border-gray-200">
<div className="flex flex-wrap items-center
justify-between mx-auto p-4">
<a href="https://geeksforgeeks.org/"
className="flex items-center">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
className="mr-2"
alt="GFG Logo" />
<span className="self-center text-2xl font-semibold ">
GeeksforGeeks
</span>
</a>
<div className="items-center justify-between hidden
w-full md:flex md:w-auto md:order-1"
id="navbar-sticky">
<ul className="flex flex-col p-4
md:p-0 mt-4 font-medium
border border-gray-100 rounded-lg
bg-gray-50 md:flex-row md:space-x-8
md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-white bg-blue-700
rounded md:bg-transparent
md:text-blue-700 md:p-0">
Home
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
Posts
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
About us
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
)
}
/* Index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Steps to run the application:
Step 1: Type the following command in terminal of project directory
npm start
Step 2: Open the following link in browser
http://localhost:3000/
Output:
Similar Reads
Tabs Layout Template using React and Tailwind
A Tabs Layout offers an organized method of presenting diverse content within a single webpage, enabling seamless switching between sections without page reloads. Typically arranged horizontally, tabs display content exclusively related to the selected tab, optimizing space on the webpage. Preview o
4 min read
Blog Page Template using React JS and Tailwind
A Blog Page is a web page that is used to display multiple blog posts on a website. Using blogs people can share their views, ideas, and opinions. A Blog Page generally contains a NavBar and Introduction followed by multiple blogs displayed in the form of a card. Prerequisites:React JSTailwind CSS p
6 min read
Create Landing Page Template using React and Tailwind CSS
This article guides you through creating a professional landing page template using React and Tailwind CSS, designed to showcase your skills, projects, and services effectively. It covers the setup of various sections, including a hero area for introductions, a services section to highlight offering
8 min read
Create Documentation Template using React and Tailwind CSS
This documentation template serves as a comprehensive guide for developers to understand the setup configuration and functionalities of the project. We are going to build the Documentation Template using React and Tailwind CSS.PrerequisitesReact.jsTailwind CSSNode.js npmReact IconsApproachTo create
4 min read
Create Podcast Template using React and Tailwind CSS
Podcasts have become a popular medium for sharing knowledge and entertainment. Creating a podcast application can be a fun project that not only enhances your skills in React and Tailwind CSS but also provides a platform to showcase your favourite podcasts. In this template we will build a responsiv
6 min read
Create Changelog Template using React and Tailwind CSS
A changelog is an essential tool for maintaining transparency and communication in a project by documenting changes, updates, and bug fixes and enhancements. This template will be built using React for the frontend framework and Tailwind CSS for the styling. The combination of these technologies all
3 min read
Design a Product List Page Template using React and Tailwind
A Product List Page is very useful in e-commerce websites as it helps the company to showcase their products to the user. This helps user to get information about the products available and make a selection. User can browse a wide variety of products and purchase the product they find useful.Let us
5 min read
Contact Us Page using ReactJS and Tailwind
The Contact Us page is crucial for user interaction, allowing users to connect with the website owner or customer support, submit feedback, and suggestions, and access departmental contact information.Preview of final output: Let us have a look at how the final output will look like.Prerequisites:Re
6 min read
Contact Us Form Using ReactJS and Tailwind
A Contact Us Form is an integral part of an organization's website. It helps the users to reach out to the organization team and share their views. A Contact Form can be used for various purposes such as giving a suggestion, asking queries, and giving feedback. The final feature will look like this:
4 min read
How to Add Dark Mode in ReactJS using Tailwind CSS ?
Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes direc
3 min read