Collapse

{% component "Collapse" %}
              {% fill "toggle" %}
                {% component "CollapseToggle" attrs:class="btn btn-primary" %}Toggle collapse{% endcomponent %}
              {% endfill %}
              {% fill "default" %}
                <div class="card card-body">
                  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                </div>
              {% endfill %}
            {% endcomponent %}

<p>
              {% component "Collapse" %}
                {% fill "toggle" %}
                  {% component "CollapseToggle" as_="a" attrs={"class": "btn btn-primary"} %}Toggle first element{% endcomponent %}
                {% endfill %}
                {% fill "default" %}
                  <div class="card card-body">
                    Some placeholder content for the first collapse component.
                  </div>
                {% endfill %}
              {% endcomponent %}
              {% component "Collapse" %}
                {% fill "toggle" %}
                  {% component "CollapseToggle" attrs={"class": "btn btn-primary"} %}Toggle second element{% endcomponent %}
                {% endfill %}
                {% fill "default" %}
                  <div class="card card-body">
                    Some placeholder content for the second collapse component.
                  </div>
                {% endfill %}
              {% endcomponent %}
            </p>

{% component "Collapse" horizontal=True %}
              {% fill "toggle" %}
                {% component "CollapseToggle" attrs:class="btn btn-primary" %}Toggle horizontal collapse{% endcomponent %}
              {% endfill %}
              {% fill "default" %}
                <div class="card card-body" style="width: 300px;">
                  This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
                </div>
              {% endfill %}
            {% endcomponent %}

{% component "Collapse" %}
              {% fill "toggle" %}
                {% component "CollapseToggle" attrs={"class": "btn btn-primary"} %}
                  Button with data-bs-target
                {% endcomponent %}
              {% endfill %}
              {% fill "default" %}
                <div class="card card-body">
                  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                </div>
              {% endfill %}
            {% endcomponent %}

{% component "Collapse" %}
              {% fill "toggle" %}
                {% component "CollapseToggle" as_="a" attrs={"class": "btn btn-primary"} %}
                  Link with href
                {% endcomponent %}
              {% endfill %}
              {% fill "default" %}
                <div class="card card-body">
                  Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                </div>
              {% endfill %}
            {% endcomponent %}