JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" >
    <img src="obama.jpg"  class="img-responsive" />
 </a>
<div class="panel panel-default"  id="obama">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        // rest of panel1's code
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body" id="panel-body1">
            // panel body
        </div>
    </div>
</div>

JavaScript

$('.collapse').on('shown.bs.collapse', function (e) {
   var id = $(e.target).prop('id');
    // To scroll to panel-body (untested)
    // var id = $(e.target).children('.panel-body').prop('id');
   navigateToElement(id);
})

function navigateToElement(id) {
    $('data-behavior="toggle-sidebar"').animate({
        scrollTop: $("#scroll-to-bottom" + id).offset().top
    }, 1000);
}