JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Nest tabs with submenus</h2>
  <ul class="nav nav-tabs">
    <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mode1
     <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#subtab1">Submenu 1</a></li>
      <li><a data-toggle="tab" href="#subtab2">Submenu 2</a></li>
      <li><a data-toggle="tab" href="#subtab3">Submenu 3</a></li>
     </ul>
    </li>   
      <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mode2
     <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#subtab1">Submenu 1</a></li>
      <li><a data-toggle="tab" href="#subtab2">Submenu 2</a></li>
      <li><a data-toggle="tab" href="#subtab3">Submenu 3</a></li>
     </ul>
    </li>
      <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mode3
     <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#subtab1">Submenu 1</a></li>
      <li><a data-toggle="tab" href="#subtab2">Submenu 2</a></li>
      <li><a data-toggle="tab" href="#subtab3">Submenu 3</a></li>
     </ul>
    </li>
  </ul>

</div>

JavaScript

jQuery(document).ready(function(){
  jQuery("#activate-home-tab").click(function(){
    console.log("opening home")
    jQuery('[href="#home"]').tab('show');
  });

  jQuery('.dropdown').on('click', function(e) {
    if (!jQuery('#tab1').is('.active')) {
      jQuery('[href="#tab1"]').tab('show');
    }
  });
  jQuery('.dropdown li [href^="#subtab"]').on('click', function(e) {
    var currHref = this.getAttribute('href');
    jQuery('[href="' + currHref + '"]').tab('show');
  });
});