accordion reatjs
import React, { useState } from "react";
import "./accordion.css";
const Accordion = ({ heading, content }) => {
const [isActive, setIsActive] = useState(false);
return (
<li className="accordion-item">
<div className="accordion-toggle" onClick={() => setIsActive(!isActive)}>
<h3>{heading}</h3><span>{isActive ? "-" : "+"}</span>
</div>
{isActive && <div className="accordion-content">{content}</div>}
</li>
);
};
export default Accordion;accordion reatjs
export const accordionData = [
{
heading: "Will my license be automatically renewed?",
content:
"Non odit magnam dolorum. Et odio et maxime consequuntur provident. Error eaque est dolor et qui. Ex odit doloremque consequatur quis. Eaque et pariatur dolores. Magni in quasi dolor repudiandae explicabo.",
},
{
heading: "Can I upgrade my license?",
content:
"Quos quam ipsam consequatur consequatur et distinctio. Facere vel ut dolorem. Quam quo neque quos voluptates cupiditate sit quae.",
},
{
heading: "Do you provide email support if I need help?",
content:
"Vel et quam reprehenderit velit. Possimus accusamus eos esse vero quo modi voluptas hic. Quia illo quisquam vel quis qui. Autem labore aut incidunt. Eius non voluptatem et laboriosam in.",
},
];accordion reatjs
.accordion {
max-width: 768px;
}
.accordion-item {
list-style: none;
}
.accordion-toggle {
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #ccc;
padding: 1em;
}
.accordion-toggle:hover {
background-color: #ddd;
}
.accordion-toggle h3 {
margin: 0;
}
.accordion-content {
background-color: #eee;
padding: 1em;
}accordion reatjs
import React from "react";
import Accordion from "./Accordion";
import { accordionData } from "./data";
const App = () => {
return (
<ul className="accordion">
{accordionData.map(({ heading, content }) => (
<Accordion heading={heading} content={content} />
))}
</ul>
);
};
export default App;Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
