Bootstrap Accordion does not work when loading content with ajax

I have my accordion, inside the body of it, I have a div where the content is loaded via ajax

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Titulo
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <div class="conteudo" data-url="MINHA URL PARTIAL">
Carregando
</div>
      </div>
    </div>
  </div>
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Titulo 2
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
            <div class="conteudo" data-url="MINHA URL PARTIAL">Carregando</div>
      </div>
    </div>
  </div>
</div>

and for this I use the following javascript code:

    $(".conteudo").each(function (index, item) {
        var url = $(item).data("url");
        if (url && url.length > 0) {
            $(item).load(url);
        }
    });

But while it loads these views, which sometimes can take time, the accordion simply hangs and does not appear the hover of the link, clicking on the accordion tabs it does nothing

Something wrong?