When applying to the ".active" class to a fixed sidenav anchor and sub anchor (see below), the accordion animation shows on page load when the nav menu is expanding (not really an animation, more like a choppy 2-step reveal). It's very distracting. How can the animation be skipped on page load so that the sidenav is rendered as open, without flickering?

As a secondary concern, the .active class has no effect on the sub anchor. It's not highlighted or changed in any way.

<li>
    <a class="collapsible-header waves-effect arrow-r active">
        <i class="fa fa-history"></i>History<i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div class="collapsible-body">
        <a class="dropdown-item" href="#">My History</a>
        <a class="dropdown-item active" asp-page="store/choose">Stores</a>
    </div>
</li>