Load div only after clicking on specific ID

Asked

Viewed 261 times

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 that collapse2 (conteúdo) was only loaded on the page after clicking on href: #collapse2. Is a accordion do bootstrap. This would be possible with Javascript?

javascript html

  • o The Content is already loaded, but is not shown, what would be the reason for not wanting to load it too ? http://jsfiddle.net/filadown/1e8wy107/1/

  • I’m using some graphics and this way it gets disfigured.

1 answer

1

Good if you want to load a content instead of leaving it pre-defined in html you can use the click event to pick up 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>
<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>

Browser other questions tagged javascript html

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