Facing trouble for accessing div tab-content using jquery

Question

I'm facing trouble while dealing with div tab-contents using jquery. I have two div tabs(myTab1 and myTab2) with each tab displaying different information. When I click a button it is accessing the 'create' div tag and displaying the information under cpp tab. But then when I'm trying to access the information under java tab it is not displaying. I want to display information depending on the tab I have selected dynamically.

This is my html code:

 $(document).ready(function() { $("#myTab a").click(function(e) { e.preventDefault(); $(this).tab('show'); }); }) 

 <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.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="create"> <ul class="nav nav-tabs" id="myTab" style="width:22%"> <li class="active"><a href="#cpp">C++</a></li> <li><a href="#java">Java</a></li> <li><a href="#python">Python</a></li> </ul> <div class="tab-content"> <div id="cpp" class="tab-pane fade in active"> <h3>#Creating an array in C++</h3> </div> <div id="java" class="tab-pane fade"> <h3>#Creating an array in Java</h3> </div> <div id="python" class="tab-pane fade"> <h3>#Creating an array in Python</h3> </div> </div> </div> <!--#End of create div--> <div class="insert"> <ul class="nav nav-tabs" id="myTab2" style="width:22%"> <li class="active"><a href="#cpp">C++</a></li> <li><a href="#java">Java</a></li> <li><a href="#python">Python</a></li> </ul> <div class="tab-content"> <div id="cpp" class="tab-pane fade in active"> <h3>#Inserting an array in C++</h3> </div> <div id="java" class="tab-pane fade"> <h3>#Inserting an array in Java</h3> </div> <div id="python" class="tab-pane fade"> <h3>#Inserting an array in Python</h3> </div> </div> </div> 

Someone please help me with this!

Answer 1

You cannot use same ID for multiple elements, use different IDs instead, also update selector in JS .nav-tabs a .

 $(document).ready(function() { $(".nav-tabs a").click(function(e) { e.preventDefault(); $(this).tab('show'); }); }) 

 <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.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="create"> <ul class="nav nav-tabs" id="myTab" style="width:22%"> <li class="active"><a href="#cpp">C++</a></li> <li><a href="#java">Java</a></li> <li><a href="#python">Python</a></li> </ul> <div class="tab-content"> <div id="cpp" class="tab-pane fade in active"> <h3>#Creating an array in C++</h3> </div> <div id="java" class="tab-pane fade"> <h3>#Creating an array in Java</h3> </div> <div id="python" class="tab-pane fade"> <h3>#Creating an array in Python</h3> </div> </div> </div> <!--#End of create div--> <div class="insert"> <ul class="nav nav-tabs" id="myTab2" style="width:22%"> <li class="active"><a href="#myTab2-cpp">C++</a></li> <li><a href="#myTab2-java">Java</a></li> <li><a href="#myTab2-python">Python</a></li> </ul> <div class="tab-content"> <div id="myTab2-cpp" class="tab-pane fade in active"> <h3>#Inserting an array in C++</h3> </div> <div id="myTab2-java" class="tab-pane fade"> <h3>#Inserting an array in Java</h3> </div> <div id="myTab2-python" class="tab-pane fade"> <h3>#Inserting an array in Python</h3> </div> </div> </div>