0

Possuo o seguinte trecho:

<div class="panel panel-default">
   <div class="panel-heading">
      <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Número Atendimentos PS que Viraram Internação</a>
      </h4>
   </div>
  <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
              Conteúdo#########
      </div>
  </div>

Gostaria que collapse2 (conteúdo) somente fosse carregado na página após clicar no href: #collapse2. É um accordion do bootstrap. Isto seria possível com Javascript?

2

1 Resposta 1

1

Bom se você quer carregar um conteúdo em vez de deixa-ló pre-definido no html você pode usar o evento click para pegar o href e dar um append no valor que você deseja.

Exemplo:

var texto = 'texto do conteúdo.';

$("a[data-toggle='collapse']").click(function() {
  var href = $(this).attr('href');
  $(href + ' .panel-body').empty();
  $(href + ' .panel-body').append(texto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Item</a>
      </h4>

  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body"></div>
  </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .