Collapse

<div class="align-self-start w-100">
    <button
        class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-demo"
        aria-expanded="false"
        aria-controls="collapse-demo"
    >
        Show project details
    </button>
    <twig:Collapse id="collapse-demo" class="mt-3">
        <div class="card card-body">
            This panel is controlled by Bootstrap's Collapse plugin. Its trigger automatically keeps <code>aria-expanded</code> synchronized.
        </div>
    </twig:Collapse>
</div>

php bin/console ux:install collapse --kit bootstrap

composer require twig/extra-bundle twig/html-extra:^3.12.0

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

{# @prop id string The unique identifier targeted by collapse controls. #}
{# @prop show boolean Whether the collapsible content is initially visible. #}
{# @prop horizontal boolean Whether the width is collapsed instead of the height. #}
{# @block content The content shown and hidden by the collapse control. #}
{%- props id, show = false, horizontal = false -%}
<div {{ attributes.defaults({
    id: id,
    class: html_classes({
        collapse: true,
        'collapse-horizontal': horizontal,
        show: show,
    }),
}) }}>
    {%- block content %}{% endblock -%}
</div>

<div class="align-self-start w-100 d-flex flex-column gap-2">
    <div>
        <a
            class="btn btn-primary"
            data-bs-toggle="collapse"
            href="#collapse-example"
            role="button"
            aria-expanded="false"
            aria-controls="collapse-example"
        >
            Link with href
        </a>
        <button
            class="btn btn-primary"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapse-example"
            aria-expanded="false"
            aria-controls="collapse-example"
        >
            Button with data-bs-target
        </button>
    </div>
    <twig:Collapse id="collapse-example">
        <div class="card card-body">
            Some placeholder content for the collapse component. This panel can be toggled by either control.
        </div>
    </twig:Collapse>
</div>

<div class="align-self-start w-75">
    <button
        class="btn btn-primary"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-width-example"
        aria-expanded="false"
        aria-controls="collapse-width-example"
    >
        Toggle width collapse
    </button>
    <div class="mt-3" style="min-height: 120px;">
        <twig:Collapse id="collapse-width-example" horizontal>
            <div class="card card-body" style="width: 300px;">
                This content collapses horizontally. The immediate child defines the expanded width.
            </div>
        </twig:Collapse>
    </div>
</div>

<div class="align-self-start w-100">
    <p class="d-flex flex-wrap gap-2">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-collapse-one" aria-expanded="false" aria-controls="multi-collapse-one">Toggle first element</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multi-collapse-two" aria-expanded="false" aria-controls="multi-collapse-two">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="multi-collapse-one multi-collapse-two">Toggle both elements</button>
    </p>
    <div class="row">
        <div class="col">
            <twig:Collapse id="multi-collapse-one" class="multi-collapse">
                <div class="card card-body">The first panel can be toggled independently or together with the second.</div>
            </twig:Collapse>
        </div>
        <div class="col">
            <twig:Collapse id="multi-collapse-two" class="multi-collapse">
                <div class="card card-body">The second panel responds to its ID and the shared class selector.</div>
            </twig:Collapse>
        </div>
    </div>
</div>