I have a situation where an element at the bottom of my HTML page is not collapsed by default. When I click on an arrow just above it, the element displays. However, since the newly collapsed element is still "below the fold", users have no clue that clicking the arrow made any difference unless they scroll down.
My setup includes Bootstrap 4 and Google Chrome version 75.0.3770.90.
After some investigation, I tried setting href=idOfControl to anchor to the element, but that didn't work as expected. So it seems like I misunderstood the concept.
I also attempted using jQuery based on guidance from this jQuery scroll to element post, but had no success.
You can see a demo where clicking on a button does not automatically anchor or scroll to the newly displayed text here: https://jsfiddle.net/huntermaxfield/cnj2m86f/
This is the snippet of my actual code:
<div class="row" style="margin-top: 0px;">
<div class="col" style="margin: 0;">
<div class="my-5">
<ul class="list-group list-group-flush collapse table" id="collapseExample1">
<li class="list-group-item px-0" style="background: beige;">
<a class="btn collapsed collapsible-custom-sections" data-toggle="collapse">
<div class="spacing-in-collapse-menu">Channel</div>
<div class="spacing-in-collapse-menu">Actual</div>
<div class="spacing-in-collapse-menu">Forecasted</div>
<div class="spacing-in-collapse-menu">Delta</div>
</a>
</li>
</ul>
</div>
</div>
</div>
In summary, I am looking for a way to automatically anchor or scroll to the bottom of the newly opened element.