React Bootstrap Div Toggle Example

Bootstrap , React.js

Nicesnippets

471

19-04-2020


Hello Friend,

React bootstrap also provide div toggle. also you can use div collapse. react bootstrap accordion toggle example with some content. In this example you click on title then open this title content. also we are call card toggle.

import React from 'react'

import { Accordion,Card } from 'react-bootstrap'

class BootstrapDivToggle extends React.Component{

render(){

return(

<div>

<Accordion defaultActiveKey="0">

<Card>

<Accordion.Toggle as={Card.Header} eventKey="0">

Nicesnippets Toggle Click Here 1

</Accordion.Toggle>

<Accordion.Collapse eventKey="0">

<Card.Body>

Hello! Welcome to Nicesnippets Toggle Click Here 1

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p>

</Card.Body>

</Accordion.Collapse>

</Card>

<Card>

<Accordion.Toggle as={Card.Header} eventKey="1">

Nicesnippets Toggle Click Here 2

</Accordion.Toggle>

<Accordion.Collapse eventKey="1">

<Card.Body>Hello! Welcome to Nicesnippets Toggle Click Here 2</Card.Body>

</Accordion.Collapse>

</Card>

</Accordion>

</div>

)

}

}

export default BootstrapDivToggle;

I hope it can help you...