Bootstrap css issue

I am using bootstrap css . I have two tabs. MyAccountTabContent & MyAccountAssociationTabContent

when I click on second tab i.e MyAccountAssociationTabContent … content does not become visible.




<div role="tabpanel" class="tab-pane active" id="MyAccountTabContent">
		<div id="createMyAccount" class="displayNone" style="display: block;">
		something
		</div>
</div>

<div role="tabpanel" class="tab-pane" id="MyAccountAssociationTabContent">
<div id="createMyAccountAssociaiton" class="displayNone">
some other thing
</div>

where to change code to make content visible as soon as I click second tab

Make sure you have both jQuery and all the plugins loaded. Check again the documentation for all attributes required to trigger tabs without code. Usually it is something trivial like a typo or a missing attribute or you copy the code but don’t change the IDs and classes everywhere.

If you don’t manage to get it working, then make a CodePen with your case and link it here so that we can have a look.

2 Likes

That doesn’t look like the right structure for bootstrap tabs?

Here’s a working demo of tabs (copied from here).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
      <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
      <li><a href="#orange" data-toggle="tab">Orange</a></li>
      <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
      <li><a href="#green" data-toggle="tab">Green</a></li>
      <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
      <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
      </div>
      <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
      </div>
      <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
      </div>
      <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
      </div>
      <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
      </div>
    </div>
  </div>
</div>
<!-- container -->
</body>
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.