Newbe Dev Stack

Answer : Bootstrap 4 Use the data-parent="" attribute on the collapse element (instead of the trigger element) <div id="accordion"> <div class="card"> <div class="card-header"> <h5> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"> Collapsible #1 trigger </button> </h5> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> Collapsible #1 element </div> </div> </div> ... (more cards/collapsibles inside #accordion parent) </div> Bootstrap 3 See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966 There is a "bug" that makes the accordion dependent on the .panel class when using the data-parent attrib...

Answer : You can animate the scroll by getting the top of the 'target element' and then calling animate on the body.. $('html, body').animate({ scrollTop: $("#target-element").offset().top }, 1000); modifying it to be something like this will help you achieve what you are after $('.panel-collapse').on('shown.bs.collapse', function (e) { var $panel = $(this).closest('.panel'); $('html,body').animate({ scrollTop: $panel.offset().top }, 500); }); source: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/ complementary fiddle: https://jsfiddle.net/hjugdwbp/ Edit: 2018-05-25 Bootstrap 4 Example Using the accordion example at: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example I have modified the code to support cards. $('.collapse').on('shown.bs.collapse', function(e) { var $card = $(this).closest('.card...