I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually scrolling. Here's what I currently have:
$(document).ready(function () {
$("#footerContent").on("hide.bs.collapse", function () {
$(".btn").html('INFO <span class="glyphicon glyphicon glyphicon-plus"></span>');
});
$("#footerContent").on("show.bs.collapse", function () {
$(".btn").html('INFO <span class="glyphicon glyphicon-minus"></span>');
});
});.btn-success, .btn-success:hover, .btn-success:active {
color: #848484;
background-color: #FFFFFF;
border-color: #fff;
}<script src="http://able.thebrewroom.com/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#footerContent">INFO <span class="glyphicon glyphicon-plus"></span>
</button>
<div id="footerContent" class="collapse">some content here</div>Although I understand that this may not provide the best user experience, as I've tried to explain to the designer, I still need to find a solution that works within these constraints. My goal is simply to have the button expand the div and then automatically scroll the page down to display the content. Thank you!