CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Insane Fragger
Insane Fragger

Reputation: 63

How do I load a DIV only when I click a tab?

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><div id="tickets"><a href="#"  role="tab"  data-toggle="tab">My Tickets</a></div></li>
  <li class="active"><div id="approvals"><a href="#" role="tab" data-toggle="tab">My Approvals</a></div></li>
</ul>

The above Approvals tab is connected to a div so I want the div to load only when the user clicks on this tab:

enter image description here

I don't want the div to load when the page loads

Upvotes: 0

Views: 1144

Answers (2)

Leo
Leo

Reputation: 675

Try something like this:

$("#approvals").click(function() {
  $('#your_div_id').html('<div> Hello World </div>');
});

Upvotes: 1

Zack Tanner
Zack Tanner

Reputation: 2590

Set display:none on the div that you don't want to appear on page load.

Then, bind a click handler to the approvals div:

$("#approvals").click(function() {
  $("#approvals_div").show();
});

Your markup might look something like this:

$("#approvals").click(function(){
  $("#approvals_div").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
   <li class="active"><div id="tickets"><a href="#"  role="tab"  data-toggle="tab">My Tickets</a></div></li>
   <li class="active"><div id="approvals"><a href="#" role="tab" data-toggle="tab">My Approvals</a></div></li>
</ul>
    
 <div id="approvals_div" style="display:none;">
   I'm initially hidden!
 </div>

Upvotes: 0

Related Questions