tab navigation not working in bootstrap - twitter-bootstrap-3

Question

Only the current active tab is showing the corresponding content, while clicking to other tab for example a href="b", the corresponding content of id="b" is not showing. the same is applicable to all other tabs.
Peter Pan, CEO
Danny Witherspoon, CFO
Agumbe Tang, CTO
Alberto Somayya, Exec.Chef
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="peter">
<h3>Peter Pan<small>Chief Epicurious Officer</small></h3>
<p>Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p></div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Danny Witherson <small>Chief Epicurious Officer</small></h3>
<p>Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p> </div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p>Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p></div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>

Answer 1

Try include the following two lines in your html header area. It should work now.
<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>

Answer 2

That's because you forgot to add the script code. In this Coursera course, every HTML file will have the following code written in before </footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
add this snippet in your aboutus.html file and it will work.