I have a bootstrap accordion on my website and I am trying to make the page go down to the bottom of the panel body on-click. Currently if you click on one of the images you may not notice that it expands into an accordion with words under the picture. Therefore when someone clicks a picture, I want the page to go to the bottom of the selected panel body on-click.
To see an example, visit https://codepen.io/aahmed2/pen/rmEojo?editors=1000
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row health-main">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" alt="Cat on sidewalk" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" role="tab" id="headingTwo">
<h2>Pet Health & Safety</h2>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="/resources/pet-diseases.asp"><h4>Pet Diseases</h4></a>
<!--<a href="/resources/pet-allergies.asp"><h4>Pet Allergies</h4></a>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" alt="Young cow near barn" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="tab" id="headingThree">
<h2>Livestock Health & Safety</h2>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="/resources/livestock-disease.asp"><h4>Livestock Diseases</h4></a>
<!--<a href="/resources/livestock-allergies.asp"><h4>Livestock Allergies</h4></a>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading wildlife" alt="Raccoon" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" role="tab" id="headingSix">
<h2>Wildlife Health & Safety</h2>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="/resources/wildlife-disease.asp"><h4>Wildlife Diseases</h4></a>
<a href="http://wildlife.unl.edu/damage-management"><h4>Wildlife Damage Management</h4></a>
<a href="/resources/wildlife-conservation.asp"><h4>Wildlife Conservation</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row health-main">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading human-health" alt="Person sitting next to dog in a park" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="tab" id="headingFour">
<h2>Human Health & Safety</h2>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="/resources/zoonotic-diseases.asp"><h4>Zoonotic Diseases</h4></a>
<a href="/resources/human-allergies.asp"><h4>Allergies</h4></a>
<a href="/resources/sanitation.asp"><h4>Sanitation</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading insect-tick-mite" alt="Bee on flower" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" id="headingOne">
<h2>Insects, Ticks, and Mites</h2>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="/resources/insect-tick-mite.asp"><h4>Diseases</h4></a></a>
<a href="/resources/pests.asp"><h4>Pests</h4></a>
<a href="/resources/pollinator-health.asp"><h4>Pollinator Health</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading eco-health" alt="Woman holding child's hand walking down a trail" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" role="tab" id="headingFive">
<h2>Ecosystem Health</h2>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="/resources/plant-health.asp"><h4>Plant Health</h4></a>
<a href="/resources/water-quality.asp"><h4>Water Quality</h4></a>
<a href="/resources/air-quality.asp"><h4>Air Quality</h4></a>
<a href="/resources/soil-quality.asp"><h4>Soil Quality</h4></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
.health-main #accordion {
margin-top: 25px;
cursor: pointer;
}
.health-main #accordion2 {
margin-top: -19px;
cursor: pointer;
margin-bottom: 0px;
}
.health-main .panel-heading:focus {
border: none;
outline: 0;
}
.health-main .panel-group {
clear: both;
}
.health-main .panel-group .panel {
border-radius: 0%;
border-width: 0;
padding: 0 !important;
}
.health-main .panel-group .panel-heading {
background-color: rgba(0,0,0,1);
border-radius: 0%;
color: #fff;
height: 350px;
text-align: center;
}
.health-main .panel-group .panel-heading h2 {
font-size: 1.99em;
text-transform: none;
color: #fff;
margin-top: 140px;
text-shadow: 2px 2px 3px #333332;
}
.health-main .panel-group .panel-heading a:active, .health-main .panel-group .panel-heading a:visited, .health-main .panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.health-main .panel-group .insect-tick-mite {
background: url(http://www.slate.com/content/dam/slate/articles/double_x/the_kids/2015/05/150522_KIDS_Tick.jpg.CROP.promo-mediumlarge.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .pet-health {
background: url(https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .livestock-health {
background: url(https://articles.extension.org//sites/default/files/styles/large/public/CalfEarlyIDFig1.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .wildlife {
background: url(https://abcwildlife.com/wp-content/uploads/2015/05/Raccoon-Control-Identifying-Raccoon-Damage.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .human-health {
background: url(https://www.gatescambridge.org/sites/www.gatescambridge.org/files/styles/flexslider_full_900x500/public/3node072child_and_dog.jpg?itok=Tsuklx_F) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .eco-health {
background: url(http://guelph.ca/wp-content/uploads/trees.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .panel-collapse {
background-color: #c1c0be;
}
.health-main .panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.health-main .panel-group a {
color: #000000;
}
.health-main .panel-group a:hover {
color: #fff;
text-decoration: none;
}
.health-main .panel-group > .panel {
margin-top: 5px;
}
What you need to do is hook on to the bootstraps show event for the accordions shown.bs.collapse. This is so you can get the height of the wrapper element after the accordion has finished expanding. You then have everything you need to achieve what you want. I have commented the code to help you see what I have done. The script should be placed after your jQuery and Bootstrap JS includes.
<script type="text/javascript">
$(document).ready(function() {
// do something when accordion has finished expanding the relevent element
$('.panel-collapse').on('shown.bs.collapse', function() {
// $(this).parent().offset().top gets the top position of the parent element.
// $(window).height() gets the height of the window.
// $(this).parent().height() gets the height of the parent element.
// Subtract the top position of the parent element by the height of the window minus the height of the parent elements height.
var scroll = $(this).parent().offset().top - ( $(window).height() - $(this).parent().height() );
// animate the window scroll by the stored scroll variable.
// The 500 is how long the scroll takes in milliseconds.
$('html, body').animate({
scrollTop: scroll
}, 500);
})
});
</script>