aria-expanded="false" Not working in bootstrap template

Question

I have downloaded this template

https://startbootstrap.com/themes/sb-admin-2/

And there is page in there called cards.html

On that page is a collapsible card example. I'm trying to get it so that it loads collapsed and the user has to expand it. So I changed this section to be:

<div class="card shadow mb-4">
<!-- Card Header - Accordion -->
<a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardExample">
  <h6 class="m-0 font-weight-bold text-primary">Collapsable Card Example</h6>
</a>
<!-- Card Content - Collapse -->
<div class="collapse show" id="collapseCardExample">
  <div class="card-body">
    This is a collapsable card example using Bootstrap's built in collapse functionality. <strong>Click on the card header</strong> to see the card body collapse and expand!
  </div>
</div>
</div>

It did have:

aria-expanded="true"

but I made it false.

Why is it still loading as expanded?

Answer 1

Bootstrap doesn't rely on aria things, it uses its own data attributes. (aria is for screen readers.

To hide it, remove the show class from collapseCardExample. See https://getbootstrap.com/docs/4.3/components/collapse/