JSFiddle - React, Tailwind, and code Playground

by pajakoo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="backBtn" col="">Back</button>

<div class="sub__navigation js_sub__navigation" >
  <div class="row">
  
    <div class="col-md-3 col " col="1">
      <div class="sub-navigation-section">
        <ul class="sub-navigation-list">
          <li class="nav__link--secondary" id="food">
            <a href="" title="Food">Food</a>
          </li> 
           <li class="nav__link--secondary"  id="drinks">
            <a href="" title="Drinks">Drinks</a>
          </li>
        </ul>
      </div>
    </div>
   
    <div class="col-md-3 col food hidden" col="2">
      <div class="sub-navigation-section">
        <ul class="sub-navigation-list">
          <li class="nav__link--secondary" id="chicken" >
            <a href="" title="diekiry">Chicken</a>
          </li> 
        </ul>
      </div>
    </div>
    
    <div class="col-md-3 col drinks hidden" col="2">
      <div class="sub-navigation-section">
        <ul class="sub-navigation-list">
          <li class="nav__link--secondary"  id="coke" >
            <a href="" title="Coke">Coke</a>
          </li> 
          <li class="nav__link--secondary" id="var1" >
            <a href="" title="diekiry">Diekiry</a>
          </li> 
        </ul>
      </div>
    </div>
    
    <div class="col-md-3 col var1 hidden" col="3">
      <div class="sub-navigation-section">
        <ul class="sub-navigation-list">
          <li class="nav__link--secondary " >
            <a href="" title="var1">var1</a>
          </li> 
          <li class="nav__link--secondary " >
      ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


.hidden{
  display:none;
  visibility:hidden;
}

li {
  color:black;
  background:white;
}

JavaScript

var $backBtn = $("#backBtn")
var backBtnArr = [];
if(false){

  $("li.nav__link--secondary").click(function(e){
    var $catId = $(e.currentTarget).attr("id");
    $("div.col").addClass("hidden");
    backBtnArr.push($catId);
    $backBtn.attr("col", backBtnArr.join() );
    //console.log("1--->",backBtnArr,$catId)
    $(".js_sub__navigation").find("."+$catId ).removeClass("hidden");
  });

  $backBtn.click(function(e){
    $catIdArr = $(e.currentTarget).attr("col").split(",");
    var $catId = $catIdArr.length > 1 ? $catIdArr.pop() : ["food"];
    $backBtn.attr("col", $catIdArr.join() );
    backBtnArr = $catIdArr;
    $("div.col").addClass("hidden");
    //console.log($catIdArr, "2--->",$catId)
    $(".js_sub__navigation").find("#"+$catId ).parent().parent().parent().removeClass("hidden");
  });
  
  } else {
  
  $("li.nav__link--secondary").on("mouseover", function(e){
    var $colId = parseInt( $(e.currentTarget).parent().parent().parent().attr("col"))+1;
    var $catId = $(e.currentTarget).attr("id");
    var allCoulmns = 4;
    for (; $colId <= allCoulmns; $colId++){
        $("div[col='"+ $colId +"']").addClass("hidden");
        //console.log("col"+$colId);
    }
   $(".js_sub__navigation").find("."+$catId ).removeClass("hidden");
  })
  
}