CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user7566666
user7566666

Reputation: 39

Toggle Bootstrap Tab

I have added bootstrap tab in my page and its working as expected.I would like to add one more feature on the added tabs. My query is,Is it possible to toggle the content area if I click the same tab again?

Here is my example what I have tried.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

Can anyone suggest some ideas?

Thanks!

Upvotes: 2

Views: 369

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, add content inside collapse class and provide id to collapsible content to toggle on tab click

  1. Add data-toggle="collapse" to tabs
  2. Add id to content and use same id as href in the tab to control toggle

codepen - https://codepen.io/nagasai/pen/wLXJXY

working code sample

   <html lang="en">
<head>
  <title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
<li class="active" data-toggle="collapse" href="#collapseExample"><a data-toggle="tab" href="#home">Home</a></li>
<li data-toggle="collapse" href="#collapseExample1"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li data-toggle="collapse" href="#collapseExample2"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li data-toggle="collapse" href="#collapseExample3"><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <h3>HOME</h3>      
  <div class="collapse" id="collapseExample">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="menu1" class="tab-pane fade">
  <h3>Menu 1</h3>
  <p class="collapse" id="collapseExample1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
  <h3>Menu 2</h3>
  <p class="collapse" id="collapseExample2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
  <h3>Menu 3</h3>
  <p class="collapse" id="collapseExample3">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
  </div>
</div>

</body>

Upvotes: 1

Related Questions