Expandable bootstrap footer

Question

I am trying to make an expandable footer in Bootstrap by utilizing the accordion. When the footer is clicked I would like the content to slide up and push the sections above it up. Currently when clicked all of the content slides down below the fold. Any help would be much appreciated.

Here is the code I am working off of as well as the fiddle

<section class="red">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Donec a lacinia turpis, ut auctor quam. Nam euismod elit et tortor tempus efficitur. Curabitur quis sapien id metus porta hendrerit vel nec libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis, nibh eu egestas tempus, purus
          velit finibus tellus, vitae eleifend ante ex non orci. Aliquam id dolor eu odio finibus fermentum. Morbi nec luctus purus. Integer tincidunt odio eros, non fringilla tortor placerat quis. Praesent consectetur massa nibh, ac maximus ante viverra
          sodales. Nunc id velit eu nisi congue pulvinar sit amet in tellus. Proin sit amet tortor nec purus suscipit dictum id in lacus. Aliquam congue auctor felis ut fermentum.</p>
      </div>
    </div>
  </div>
</section>

<section class="yellow">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Mauris finibus nibh in accumsan sodales. Vivamus interdum tempus nibh vel efficitur. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce suscipit eget turpis ac viverra. Donec
          imperdiet sem a leo elementum pulvinar. Donec scelerisque elit ipsum, non tristique libero tincidunt sed.</p>
      </div>
    </div>
  </div>
</section>

<section class="green">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Suspendisse ac libero maximus, sollicitudin ligula a, tempus turpis. Duis cursus, felis nec molestie cursus, nibh quam laoreet elit, id fringilla velit leo nec neque. Aenean nibh neque, ultricies non tortor non, lacinia suscipit nulla. Quisque
          in ultrices ante. Ut dignissim, urna ut egestas ornare, nulla erat accumsan augue, at fermentum libero eros semper ligula. Phasellus efficitur eros ac leo posuere, ultrices venenatis risus rutrum. Nullam facilisis volutpat pellentesque.</p>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <div class="container-fluid p-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <p class="panel-title m-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  &#x2191;
                </a>
          </p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-6 offset-md-3 align-self-center">
                Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet.Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna
                maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet. Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante,
                quis convallis purus iaculis sit amet.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</footer>

Solution:

$("#collapseOne").on("show.bs.collapse", function() {
$("html, body").animate({ scrollTop: 999999 }, "slow");

});

fiddle

Answer 1

Solution:

$("#collapseOne").on("show.bs.collapse", function() {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

fiddle