JSFiddle - React, Tailwind, and code Playground

by qustosh

HTML

<div id="menu">
    <a id="show">show</a>
    <a id="add">add</a>
    <a id="remove">remove</a>
    <a id="modify">modify</a>
</div>
<div id="submenu">
    <a id="pracownicy">pracownicy</a>
    <a id="zadania">zadnia</a>
    <a id="podzadania">podzadania</a>
</div>
<div id="viewport">

</div>

CSS

body{padding:10px 0px 0px 10px;}
a{border:black solid 2px;padding:2px;}
//a:hover{background-color:black;color:white;}


.selected{color:white;background-color:black}
.not-selected{color:black;background-color:white}
.not-selected:hover{color:white;background-color:black}

#submenu{display:none;margin-top:10px;}
#viewport{border:black solid 3px;margin-top:10px;width:300px;height:300px}

JavaScript

//EVENTS TEST .ON() .OFF() //JSON

//refs
var $viewPort = $("#viewport");
var $menu = $("#menu");
var $menuA = $("#menu").find("a"); 
var $submenu = $("#submenu");
var $submenuA = $("#submenu").find("a"); 

//views
var views = {
    "pracownicy":"<div>PRACOWNICY VIEW</div>",
    "zadania":"<div>ZADNIA VIEW</div>",
    "podzadania":"<div>PODZADANIA VIEW</div>"
}
    
//start
function addClasses(){
     $menuA.addClass("not-selected");
     $submenuA.addClass("not-selected");
}

//functions
function clearSelected(selector, pressed){
    
    var selector = $(selector);
    selector.removeClass("selected not-selected");
    console.log(selector);
    
    if(pressed){
        $(pressed).addClass("selected");
        $(pressed).siblings().addClass("not-selected");
    }else{
        selector.addClass("not-selected");
    }
}

function clearEvents(selector, what){
    $(selector).off(what);
}

function clearEventsSubmenu(){
    
}

//------------------//

//events for submenu
var evForSubmenu = {
    "show": function(e){
        e.preventDefault();
        
        clearSelected($submenuA,this);
        //LOG
        console.log(this, $(this).siblings());
        
        var whichOne = $(this).attr("id");
        $viewPort.html("");
        $viewPort.append(views[whichOne]);    
    },
    "add": function(){},
    "remove": function(){},
    "modify": function(){}

}

$menu.on("click","a", function(e){
    
    e.preventDefault();
    
    //*plan:
    //*reset class "selected" on menu elems
    //*add class "selected" on pressed menu el
    
    //*reset class "selected" on submenu elems
    //*clear events on submenu
    //*find out which a element on was pressed
    //*add events to submenu accordingly

    clearSelected($menuA, this);
    clearSelected($submenuA);
    clearEvents($submenu,"click");
    
    var evType = $(this).attr("id");
    $submenu.fadeOut(100).fadeIn(200)
        .on("click","a",evForSubmenu[evType]);
              
});

(function init(){
  ...