JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-12">
  <div class=row>
    <div class="col-xs-12">
      <div class="nav">
        <ul>
          <li><a href="#a">Option A</a></li>
          <li><a href="#b">Option B</a></li>
          <li><a href="#c">Option C</a></li>
        </ul>
      </div>
    </div>
    <div class="col-xs-12">
      <div id="a" class="tab-content">
        <h2>Option A</h2>
        <p>Option A</p>
      </div>
      <div id="b" class="tab-content">
        <h2>Option B</h2>
        <p>Option B</p>
      </div>
      <div id="c" class="tab-content">
        <h2>Option C</h2>
        <p>Option C</p>
      </div>
    </div>
  </div>
</div>

CSS

.newdiv {
  height: 5px;
  width: 5%;
  background-color: powderblue;
}

JavaScript

$(document).ready(function() {
  $('.nav ul li:first').addClass('active');
  $('.tab-content:not(:first)').hide();

  $('.nav ul li a').click(function(event) {
    var html = "";
    html = "<div class='newdiv'></div>"
    event.preventDefault();
    if ($(this).parent().find('.newdiv').length === 0)
      $(this).parent().append(html);
    var content = $(this).attr('href');
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    $(content).show();
    $(content).siblings('.tab-content').hide();
  });
  // $('.nav ul li a').click(function (e) {
  //     var content = $(this).attr('href');
  //     $("content").css({
  //         'position': 'absolute',
  //         'left': $(this).offset().left,
  //         'top': $(this).offset().top + $(this).height() + 5
  //     }).show("slow").delay(3000).hide("slow");
  // });
});