Bootstrap accordion jumps when expanding

Question

I am using a snippet to load external divs to Bootstrap accordion items. Initially, the divs were loaded on page load, but then I modified the code so that they would load on button click.

I have used two different snippets to make this happen, and they both result in a rather jumpy transition of the accordion items when expanding. However, this didn't happen when the divs where loaded on page load.

I have searched for a solution to this problem, I have tried many things that worked for other people (such as zero margin and padding or enclosing both the button and the panel-body inside a div), but none of them worked in this case.

If you have any suggestions, please tell me. Thank you in advance

HTML

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a data-href="/path/to.html #firstdiv" class="ajax-link" data-ajaxtarget="#first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Read more
          </a>
         </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
         <div class="panel-body" id="first"></div>
        </div>
      </div>
     </div>

JS/JQuery

(function($){
$(document).ready(function(){
ajaxLink(); 
linkPreventDefault();  
});

function ajaxLink(){
$("a.ajax-link").on('click', function(event){     
  var thisLink = $(this);
  var targetUrl = thisLink.attr("data-href");
  var target = thisLink.data('ajaxtarget');
  console.log("loading via ajax: "+ targetUrl + ",in div: "+ target);

  $(target).load( targetUrl, function( response, status, xhr ) {
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        console.error (msg + xhr.status + " " + xhr.statusText );
      }else if(status="success"){
        console.log("successfully loaded");
        //OPTIONAL: unbind the links click event and bind a new one
        noMoreAjax(thisLink);          
    }
  });
  event.preventDefault();   
});
}

function linkPreventDefault(){
$('a.link-prevent').click(function(event){
  console.log
  event.preventDefault();
});
}

function noMoreAjax(item){    
var linkItem = $(item);
console.log("No more Ajax for this link");
linkItem.removeClass('ajax-link');
linkItem.addClass('link-prevent');
linkItem.unbind('click');
$(linkItem).click(function(event){
  console.log("Preventing after ajax");
  event.preventDefault();
});
}

})(jQuery); 

(OLD JS:

$(document).ready(function(){
$('#accordion').click(function(){
    $('#first').load('/path/to.html #firstdiv');
});
})

)

Answer 1

You should expand accordion item once received response for the ajax call. So remove data-toggle="collapse" href="#collapseOne" attributes from your link and call $('#collapseOne').collapse() in callback function, like this:

 $(target).load( targetUrl, function( response, status, xhr ) {
      if ( status == "error" ) {
        var msg = "Sorry but there was an error: ";
        console.error (msg + xhr.status + " " + xhr.statusText );
      }else if(status="success"){
        $('#collapseOne').collapse();
        console.log("successfully loaded");
        //OPTIONAL: unbind the links click event and bind a new one
        noMoreAjax(thisLink);          
    }
  }); 

Answer 2

See a working sample here

I've used setTimeout() to fake ajax call, so you'll need to update that part, but other than that, everything is there.