Collapse

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
	Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
	Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
	<div class="card card-body">
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
	</div>
</div>

import React, { useState } from 'react';
import { Button, Card, Collapse } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const BasicExample = () => {
    const [open, setOpen] = useState(false);
  return (
    <>
        <Link to="#" onClick={() => setOpen(!open)} >Collapse With Link</Link>
        <Button variant="primary" onClick={() => setOpen(!open)} >Collapse With Button</Button>
        <Collapse in={open}>
            <Card body id="example-collapse-text">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                labore wes anderson cred nesciunt sapiente ea proident.
            </Card>
        </Collapse>
    </>
  );
}
export default BasicExample;

import React, { useState } from 'react';
import { Button, Card, Collapse } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const BasicExample = () => {
    const [open, setOpen] = useState(false);
  return (
    <>
        <Link to="#" onClick={() => setOpen(!open)} >Collapse With Link</Link>
        <Button variant="primary" onClick={() => setOpen(!open)} >Collapse With Button</Button>
        <Collapse in={open}>
            <Card body id="example-collapse-text">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                labore wes anderson cred nesciunt sapiente ea proident.
            </Card>
        </Collapse>
    </>
  );
}
export default BasicExample;

<template>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-bs-target
    </button>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
    </div>
</template>

<template>
    <BCol>
        <a class="btn btn-primary" v-b-toggle.collapseExample role="button">
            Collapse with Link
        </a>
        <BButton v-b-toggle.collapseExample variant="primary">
            Collapse with Button
        </BButton>
        <BCollapse id="collapseExample">
            <BCard>
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
                anderson cred nesciunt sapiente ea proident.
            </BCard>
        </BCollapse>
    </BCol>
</template>

<script>
  import { Button, Card } from "@sveltestrap/sveltestrap";
</script>
<div class="hstack flex-wrap gap-3 p-4">
      <a
        class="btn btn-primary"
        data-bs-toggle="collapse"
        href="#collapseExample"
        role="button"
        aria-expanded="false"
        aria-controls="collapseExample"
      >
        Link with href
      </a>
      <Button
        color="primary"
        data-bs-toggle="collapse"
        data-bs-target="#collapseExample"
        aria-expanded="false"
        aria-controls="collapseExample"
      >
        Button with data-bs-target
      </Button>
      <div class="collapse" id="collapseExample">
        <Card body>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </Card>
      </div>
    </div>

<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
<div class="row">
	<div class="col">
		<div class="collapse multi-collapse" id="multiCollapseExample1">
			<div class="card card-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>
	<div class="col">
		<div class="collapse multi-collapse" id="multiCollapseExample2">
			<div class="card card-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>
</div>

import React, { useState } from 'react';
import { Button, Card, Col, Collapse, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const CollapseHorizontal = () => {
    const [open, setOpen] = useState(false);
  return (
    <Row>
        <Col sm>
            <Button
                onClick={() => setOpen(!open)}
                aria-controls="example-collapse-text"
                aria-expanded={open}
                className="mb-3"
            >
                Collapse Horizontal
            </Button>
            <Row>
                <Col>
                    <Collapse in={open} dimension="width">
                        <div id="example-collapse-text">
                            <Card body style={{ width: '400px' }}>
                                Anim pariatur cliche reprehenderit, enim eiusmod high life
                                accusamus terry richardson ad squid. Nihil anim keffiyeh
                                helvetica, craft beer labore wes anderson cred nesciunt sapiente
                                ea proident.
                            </Card>
                        </div>
                    </Collapse>
                </Col>
            </Row>
        </Col>
    </Row>
  );
}
export default CollapseHorizontal;

import React, { useState } from 'react';
import { Button, Card, Col, Collapse, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const CollapseHorizontal = () => {
    const [open, setOpen] = useState(false);
  return (
    <Row>
        <Col sm>
            <Button
                onClick={() => setOpen(!open)}
                aria-controls="example-collapse-text"
                aria-expanded={open}
                className="mb-3"
            >
                Collapse Horizontal
            </Button>
            <Row>
                <Col>
                    <Collapse in={open} dimension="width">
                        <div id="example-collapse-text">
                            <Card body style={{ width: '400px' }}>
                                Anim pariatur cliche reprehenderit, enim eiusmod high life
                                accusamus terry richardson ad squid. Nihil anim keffiyeh
                                helvetica, craft beer labore wes anderson cred nesciunt sapiente
                                ea proident.
                            </Card>
                        </div>
                    </Collapse>
                </Col>
            </Row>
        </Col>
    </Row>
  );
}
export default CollapseHorizontal;

<template>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    <div class="row">
        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample1">
                <div class="card card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
            </div>
        </div>
        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample2">
                <div class="card card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
            </div>
        </div>
    </div>
</template>

<template>
    <BButton variant="primary" v-b-toggle.collapse-a>Toggle Collapse A</BButton>
    <BButton variant="primary" v-b-toggle.collapse-b>Toggle Collapse B</BButton>
    <BButton variant="primary" v-b-toggle.collapse-a.collapse-b>
        Toggle Collapse A and B
    </BButton>
    <!-- You can also use it like this -->
        <!-- Via space separated string of Ids passed to directive value -->
            <BButton v-b-toggle="'collapse-a collapse-b'">Toggle Collapse A and B</BButton>
        <!-- Via array of string Ids passed to directive value -->
            <BButton v-b-toggle="['collapse-a', 'collapse-b']">Toggle Collapse A and B</BButton>
    <BRow>
        <BCol>
        <BCollapse id="collapse-a">
            <BCard title="Collapsible Content A!">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere
            eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci
            impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate
            culpa molestiae?
            </BCard>
        </BCollapse>
        </BCol>
        <BCol>
        <BCollapse id="collapse-b">
            <BCard title="Collapsible Content B!">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error facere
            eligendi rem quod enim architecto vel fuga voluptate dignissimos adipisci
            impedit maiores, veritatis laudantium aperiam possimus incidunt cupiditate
            culpa molestiae?
            </BCard>
        </BCollapse>
        </BCol>
    </BRow>
</template>

<script>
  import { Button, Card, Col, Row } from "@sveltestrap/sveltestrap";
</script>
    <div class="hstack flex-wrap gap-3 p-4">
      <a
        class="btn btn-primary"
        data-bs-toggle="collapse"
        href="#multiCollapseExample1"
        role="button"
        aria-expanded="false"
        aria-controls="multiCollapseExample1">Toggle first element</a
      >
      <Button
        color="primary"
        data-bs-toggle="collapse"
        data-bs-target="#multiCollapseExample2"
        aria-expanded="false"
        aria-controls="multiCollapseExample2"
      >
        Toggle second element
      </Button>
      <Button
        color="primary"
        data-bs-toggle="collapse"
        data-bs-target=".multi-collapse"
        aria-expanded="false"
        aria-controls="multiCollapseExample1 multiCollapseExample2"
      >
        Toggle both elements
      </Button>
      <Row>
        <Col>
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <Card body>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Card>
          </div>
        </Col>
        <Col>
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <Card body>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Card>
          </div>
        </Col>
      </Row>
    </div>