Bootstrap Accordion does not work when loading content with ajax

Asked

Viewed 801 times

-1

I have my acordion, inside his body, 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 that 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 can sometimes take a while,

Something wrong?

  • It is easier for those who want to test if you provide a plug'n'play code, with minimal html containing <script src> and such.

2 answers

0

Hi,

Your HTML is invalid. Before your second <div class="panel-heading"> is missing a <div class="panel panel-default">.

Here has an example working.

  • I don’t know where you saw it missing....

0


In research, I saw that it is because of the lib Collapse.js that bootstrap uses. It does not get support for this.

One way to resolve, is to click on accordion.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.