import React, { useState } from
"react"
;
import Accordion from
"react-bootstrap/Accordion"
;
import Card from
"react-bootstrap/Card"
;
import Button from
"react-bootstrap/Button"
;
import
"bootstrap/dist/css/bootstrap.min.css"
;
function
AccordionMenu() {
const [activeKey, setActiveKey] = useState(
"0"
);
const sections = [
{
title:
"HTML"
,
content: `HTML stands
for
HyperText Markup Language.
It is used to design the web pages.
With the help of HTML, you can create
a complete website structure. HTML is the
combination of Hypertext and Markup language.`
},
{
title:
"CSS"
,
content: `CSS (Cascading Style Sheets) is used to
styles web pages. Cascading Style Sheets
are fondly referred to as CSS. The reason
for
using
this
is to simplify the process
of making web pages presentable.`
},
{
title:
"JavaScript"
,
content: `JavaScript is a lightweight,
cross-platform, single-threaded...`
}
];
const handleAccordionClick = (index) => {
setActiveKey(activeKey ===
index ?
null
: index);
};
return
(
<div className=
"container"
>
<h2 className=
"text-success"
>
GeeksforGeeks
</h2>
<h3>Accordion menu</h3>
<Accordion activeKey={activeKey}>
{sections.map((section, index) => (
<Card key={index}>
<Card.Header>
<Accordion.Toggle
as={Button}
variant=
"link"
eventKey={index.toString()}
onClick={
() =>
handleAccordionClick(index.toString())}>
{section.title}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse
eventKey={index.toString()}>
<Card.Body>
{section.content}
</Card.Body>
</Accordion.Collapse>
</Card>
))}
</Accordion>
</div>
);
}
export
default
AccordionMenu;