Q:

Initial use of Bootstrap Collapse component is not working

I have an app that uses Bootstrap. I need to use the Bootstrap Collapse component. I have created a Bootply to demonstrate my problem here. My code looks like this:
<div id="items-group" class="form-group">
  <div data-toggle="collapse" data-parent="#items-group" data-target="#items-list" aria-expanded="true" aria-controls="items-list" class="collapsable-group-header">
    <ul class="list-inline no-padding-below" style="margin-bottom:0;">
      <li><span class="glyphicon glyphicon-chevron-down"></span></li>
      <li class="no-padding-x">
        <h5 style="margin:0;">Items <span>(<button type="button" class="btn btn-link btn-link-padding" onclick="selectAll('items-list')">choose all</button>)</span></h5>
      </li>
    </ul>
  </div>

  <div id="items-list" style="padding-left:32px;">
    <label style="font-weight:normal;">
      <input type="checkbox">
      <span>Item A</span>
    </label><br>
    <label style="font-weight:normal;">
      <input type="checkbox">
      <span>Item B</span>
    </label><br>
    <label style="font-weight:normal;">
      <input type="checkbox">
      <span>Item C</span>
    </label><br>
  </div>
</div>

If you run the Bootply, you will notice that the collapse does not work correctly on the initial load. When the page initially loads, the collapse items are visible (as expected). Then click the header. It is supposed to collapse the items. Instead, it quickly hides them and then expands the list. After the initial run, it works fine. Its just that when the page loads, I need to get it so the list collapses when you click it. I thought setting aria-expanded="true" would take care of this, however it didn't.

A:

You are missing the classname of the group that identifies the collapse, so when you click the first time the action just toggle that classnames. Add this:

<div class="collapse in" id="items-list" style="padding-left:32px;">

UpdatedBootply

