Load div only after clicking specific id

0

I have the following excerpt:

<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>

I would like collapse2 (conteúdo) to only load on the page after clicking href: #collapse2 . It is accordion do bootstrap . Would this be possible with Javascript ?

    
asked by anonymous 04.11.2015 / 13:10

1 answer

0

Well if you want to load a content instead of default in the html you can use the click event to get the href and give an append in the value you want.

Example:

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><linkhref="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><divclass="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>
    
04.11.2015 / 13:30