Search code examples
htmlcssreactjsbootstrap-5reactstrap

Reactstrap: how to set uncontrolled collapse as open by default


Is there any option to display uncontrolled collapse as opened?

Here is the default code for uncontrolled collapse, it is shown as collapsed tab.

<Button color="primary" id="toggler">
  Toggle
</Button>
<UncontrolledCollapse toggler="#toggler">
  <Card>
    <CardBody>
      Lorem ipsum dolor sit amet consectetur adipisicing...
    </CardBody>
  </Card>
</UncontrolledCollapse>

Solution

  • Yes, just add:

    <UncontrolledCollapse toggler="#toggler" defaultOpen={true}>
    ...
    </UncontrolledCollapse>