CODEWITHSUNDEEP
bootstrap-4
Gubberrr
Gubberrr

Reputation: 96

Bootstrap Collapse with aria-expanded="true" doesn't work as expected

I use this following code to create collapse-element with Bootstrap 4.5:

    <div class="container py-2">
        <div class="row">
<button class="btn btn-success my-3" type="button" data-toggle="collapse" data-target="#collapseSelectTable" aria-expanded="true" aria-controls="collapseSelectTable">toggle element</button>
            <div class="container collapse" id="collapseSelectTable">
            <div class="row bg-light border border-info rounded align-items-center">
                <p>the table</p></div>
            </div>
        </div>
    </div>

Clicking on the button toggles the collapsed element just fine, but I expect that it should be visible 'cos "aria-expanded=true" as explained in https://getbootstrap.com/docs/4.5/components/collapse/#accessibility .

Upvotes: 1

Views: 5216

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

The show class is needed on the collapse element to make it open by default...

"If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead."

https://codeply.com/p/wZCrMNXG1S

Upvotes: 5

Related Questions