bootstrap accordion in my application where the requirement is one form inside accordionand when i click search button in that form 3rd accordion must open for that i have written a function like below:
const [expanded1,setexpanded1] = useState(true)
const [expanded2,setexpanded2] = useState(false)
const [expanded3,setexpanded3] = useState(false)
const Accordion1 = () => {
setexpanded1(!expanded1)
setexpanded2(false)
setexpanded3(false)
}
const Accordion2 = () => {
setexpanded2(!expanded2)
setexpanded1(false)
setexpanded3(false)
}
const Accordion3 = () => {
setexpanded3(!expanded3)
setexpanded2(false)
setexpanded1(false)
}
in second accordion i am having form and button, Ihave shared only button code here
<Button
color="btn btn-primary"
type="button"
className="mr-3"
id="create_button"
onClick={Accordion3}
aria-expanded={expanded3}
as={Card.Header}
eventKey="2"
>
Search
</Button>
In 3rd accordion:
<Card>
<CardHeader>
<h5 className="mb-0">
<Accordion.Toggle
as={Card.Header}
className="btn btn-link" color="default"
onClick={Accordion3}
eventKey="2"
aria-expanded={expanded3}
style={{fontSize:"16px"}}
>
{"Search Results"}
</Accordion.Toggle>
</h5>
</CardHeader>
<Accordion.Collapse eventKey="2">
<CardBody>
<Search/>
</CardBody>
</Accordion.Collapse>
</Card>
when i click on button arrow mark is toggling but content is not opening.