bulma bootstrap tabs

by willtx

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href=" <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" >
 <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js" crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>

<section class="section">
    <div class="container">
        <h1 class="title">
            Dashboard
        </h1>
        <div id="dashboardTabs" class="tabs is-boxed">
            <ul>
                <li class="is-active" data-tab="overview"><a>Overview</a></li>
                <li data-tab="products"><a>Products</a></li>
                <li data-tab="orders"><a>Orders</a></li>
                <li data-tab="payments"><a>Payments</a></li>
                <li data-tab="shipments"><a>Shipments</a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div class="is-active" data-content="overview">
                <div class="section">
                    <div class="columns" style="display: flex;">
                        <div class="column is-one-quarter">
                            <div class="box">
                                <div class="heading">Top Seller Total</div>
                                <div class="title">56,950</div>
                                <div class="level">
                                    <div class="level-item">
                                        <div class="">
                                            <div class="heading">Sales $</div>
      ...

CSS

#tab-content div {
   display: none;
 }

 #tab-content div.is-active,
 #tab-content div.is-active * {
   display: block;
 }
    #tableProducts > thead tr,
    #tableProducts > tbody tr {
        display: inline-flex !important;
    }
    #tableProducts thead tr th,
    #tableProducts tbody tr td {
        width: 160px !important;
    }
 .flex-container {
   -moz-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   -o-flex-wrap: nowrap;
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
 }

JavaScript

function handleMenuClick() {
  const $mainLinks = document.querySelectorAll('.main-link-item');

  //debugger;
  if ($mainLinks.length > 0) {
    $mainLinks.forEach(el => {
      el.addEventListener('click',
        () => {
          // debugger;
          // Get the source from the "data-target" attribute
          // const target = el.dataset.target;
          //const $target = document.getElementById(target);

          //TODO finish setting toggling active
          // set $selectedMainMenuItem
          $selectedMainMenuItem = el.id;
          // check if $previouslySelectedMainMenuItem is set
          if (!$previouslySelectedMainMenuItem) {
            $previouslySelectedMainMenuItem = el.id;
          }

          // compare ids $selectedMainMenuItem $previouslySelectedMainMenuItem
          if (($previouslySelectedMainMenuItem === $selectedMainMenuItem) &&
            $('#' + $selectedMainMenuItem).hasClass("is-active")) {
            // if both have objects && equal
            // return, do nothing
            return;
          } else {
            el.classList.toggle('is-active');
          }

          // not equal
          // toggle both is-active classes
          if ($previouslySelectedMainMenuItem !== $selectedMainMenuItem) {
            // create pattern to find class name
            const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
            //$('#' + $previouslySelectedMainMenuItem).toggleClass('is-active');
            const pre = document.query("#$previouslySelectedMainMenuItem");
            pre.className = pre.className.replace(reg, ' ');

            $('#' + $selectedMainMenuItem).toggleClass('is-active');
          }

        });
    });
  }
}

function initProductTable() {

  const data = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco",...