CODEWITHSUNDEEP
jquerytwitter-bootstrap
jakonda
jakonda

Reputation: 57

Hide Bootstrap tab content

I have Bootstrap tabs , each tab has a content. I'd like to hide the content of "active" tab and show it only after I click on the tab. How do i hide content first and show it after clicking on the tab.

Please advice. Thank you in advance!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Enterprise Analytics</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<!-- Nav tabs -->
<ul class="nav nav-pills pill-marg" role="tablist">
<li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li>
<li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a>
</li>
</ul>
  <div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="orange">
             <div class="container">
              <div class="row">Some content</div>
              </div>
             </div>
         
          <div role="tabpanel" class="tab-pane" id="apple">
          <div class="container">
          <div class="row">Some Content2</div>
          </div>
          </div>
          
    </div>

Upvotes: 1

Views: 2487

Answers (2)

Alex Mac
Alex Mac

Reputation: 2993

Please go through below updated code. This will help you to fix your issue.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

s and it will work for you.

Upvotes: 2

hans-k&#246;nig
hans-k&#246;nig

Reputation: 553

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
    $(".active").click(function(){
        $(".active_content").show();
    }); 
});
</script>

<style>
.active_content{
display:none;
}
</style>

</head>
<body>

<!-- Nav tabs -->
<ul class="nav nav-pills pill-marg" role="tablist">
    <li role="presentation" class="active"><a class="" href="#orange" aria-controls="3"role="tab" data-toggle="tab">Active Tab Name</a></li>
    <li role="presentation"><a class="" href="#apple" aria-controls="tracking"role="tab" data-toggle="tab">Tab Name</a>
        </li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="orange">
         <div class="container">
          <div class="row active_content">Some content</div>
          </div>
         </div>

      <div role="tabpanel" class="tab-pane" id="apple">
      <div class="container">
      <div class="row">Some Content2</div>
      </div>
      </div>

</div>

</body>
</html>

Upvotes: 0

Related Questions