# Collapse

### Basic Collapse

{% tabs %}
{% tab title="Basic" %}
![](/files/-LotS3l6g3WeZEW-6-nb)
{% endtab %}

{% tab title="Source Code" %}

```markup
<p>
    <a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="true" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse show" id="collapseExample" style="">
    <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>
```

{% endtab %}
{% endtabs %}

### Multiple Target Collapse

{% tabs %}
{% tab title="Multi" %}
![](/files/-LotSTeimz3_mQ_mg6j4)
{% endtab %}

{% tab title="Source Code" %}

```markup
<p>
    <a class="btn btn-primary mr-2 mb-2" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="true" aria-controls="multiCollapseExample1">First Element</a>
    <button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="true" aria-controls="multiCollapseExample2">Second Element
    </button>
    <button class="btn btn-primary mr-2 mb-2" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="true" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both
        elements
    </button>
</p>
<div class="row">
    <div class="col">
        <div class="multi-collapse collapse show" id="multiCollapseExample1" style="">
            <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="multi-collapse collapse show" id="multiCollapseExample2" style="">
            <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>                                
```

{% endtab %}
{% endtabs %}

### Accordion

{% tabs %}
{% tab title="Accordion" %}
![](/files/-LotSqSpEDRK2CZ-2mbt)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- Accordion -->
<div class="accordion" id="accordion-example">
<div class="card">
    <div class="card-header" id="headingOne">
        <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">
                Collapsible Group Item #1
            </button>
        </h5>
    </div>

    <div id="collapse-one" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-example" style="">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid.
            3
            wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
            truck quinoa nesciunt
            laborum
            eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
            squid single-origin coffee
            nulla
            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat craft
            beer
            farm-to-table, raw denim aesthetic synth nesciunt you probably
            haven't heard of them accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two">
                Collapsible Group Item #2
            </button>
        </h5>
    </div>
    <div id="collapse-two" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion-example" style="">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid.
            3
            wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
            truck quinoa nesciunt
            laborum
            eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
            squid single-origin coffee
            nulla
            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat craft
            beer
            farm-to-table, raw denim aesthetic synth nesciunt you probably
            haven't heard of them accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" id="headingThree">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three">
                Collapsible Group Item #3
            </button>
        </h5>
    </div>
    <div id="collapse-three" class="collapse" aria-labelledby="headingThree" data-parent="#accordion-example" style="">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid.
            3
            wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
            truck quinoa nesciunt
            laborum
            eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
            squid single-origin coffee
            nulla
            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat craft
            beer
            farm-to-table, raw denim aesthetic synth nesciunt you probably
            haven't heard of them accusamus
            labore sustainable VHS.
        </div>
    </div>
</div>
</div>
<!-- /accordion -->                                
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/collapse.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.