title: Scrolling to content after a Bootstrap Accordion is opened
body: <p>I have a Bootstrap Accordion that has many panels in it. The issue I am facing is if the panel opens off the page the user has no idea that the panel is open and they can scroll down to it.</p>
  
  <p>To solve this I wanted to be able to scroll to the content that is now open so they know that the content is open and it saves them from scrolling to it. </p>
  
  <p>I seem to be running into issues though when trying to attempt this.</p>
  
  <p>This is what my function looks like</p>
  
  <pre><code>$('.accLink').on('click', function(){
    if($(this).parent().next('.panel-collapse').hasClass('in')){
  
    }else{
     //This is where the scroll would happen
    }
  });
  </code></pre>
  
  <p>so far I have tried...</p>
  
  <pre><code>$('html, body').animate({
    scrollTop: ($(this).parent().next('.panel-collapse'))
    },500);
  </code></pre>
  
  <p>and </p>
  
  <pre><code>$('div').animate({
    scrollTop: ($(this).parent().next('.panel-collapse'))
    },500);
  </code></pre>
  
  <p>I have also tried something like this...</p>
  
  <pre><code>function scrollToElement(ele) {
      $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
  }
  
  var element = $(this).parent().next('.panel-collapse').attr('id');
  scrollToElement($('#'+element));
  </code></pre>
  
  <p>but neither do anything to the page. it just sits there. Any help would be appreciated!</p>