I have a collapsable element at the bottom of my page and when i click to collapse it, it doesn't anchor to the newly opened element

Question

I've got an element at the bottom of my html page. By default, this element is not collapsed. When I click on an arrow just above the mentioned element, it displays. However, the newly collapsed element is still "below the fold". So the user has no idea that clicking on the arrow did anything unless they scroll down.

I'm using bootstrap 4 on google chrome version 75.0.3770.90.

After some digging, I thought that by setting href=idOfControl it would anchor to that element. That isn't working though, so I must have misunderstood that.

I have tried some jquery following this jQuery scroll to element as well. No luck.

Here is a demo, you can see that when clicking on the button it doesn't auto anchor/scroll to the newly displayed text. https://jsfiddle.net/huntermaxfield/cnj2m86f/

Here is 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 short, i'd like to automatically anchor/scroll to the bottom of the newly opened element.

score 1 · Accepted Answer · answered Jul 08 '19 at 23:57

I think that it is caused by event.preventDefault and event.stopPropagation on Jquery Function.

I suggest this solution:

let btns = document.querySelectorAll(".btn");

btns.forEach((e) => {
 e.addEventListener("click", function () {
   if (document.querySelector("#collapseExample").classList.contains("show")) {
     document.querySelector("#collapseExample").classList.remove("show");
    } else {
      document.querySelector("#collapseExample").classList.add("show");
      window.scrollTo({
        top: document.querySelector("#collapseExample").offsetTop,
        behavior: "smooth"
      })
    }
  })
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.stuff {
  height: 400px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="stuff">

</div>

<p>
  <a class="btn btn-primary">
    Link with href
  </a>
  <button class="btn btn-primary">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

I have a collapsable element at the bottom of my page and when i click to collapse it, it doesn't anchor to the newly opened element

1 Answers1