JSFiddle - React, Tailwind, and code Playground

by whirly1227

HTML

<button id="ADC" href="#usertype" class="button" onClick="FillUserTypes('ADC');" >Site1</button>
<button id="ADC" href="#usertype" class="button" onClick="FillUserTypes('ADC');" >Site2</button>
<br>
<br>
<button id="designer" class="button" onClick="userTypeClick('Designer');">userType1</button>
<button id="designer" class="button" onClick="userTypeClick('Designer');">userType2</button>
<br>
<br>
<button href="#topic" class="button" onClick="cadORcam('CAD');">CAD</button>
<button href="#topic" class="button" onClick="cadORcam('CAD');">CAM</button>

CSS

.actSite {
	background-color: #444;
}
.actUT {
	background-color: #444;
}
.actCadCam {
	background-color: #444;
}

JavaScript

function FillUserTypes(actSite){
	// Show correct User Types for Active Site
	if (actSite == "ADC"){
		$('#UTlist').load('content/usertypes.php #adc');
	}else {
		$('#UTlist').load('content/usertypes.php #other');
	}
	//highlight button
	$('button').removeClass('actSite');
	$(document.activeElement).addClass('actSite');
	localStorage.setItem("actSite", actSite);
};

function userTypeClick(actUT){
	// Store User Type and show Main Topic
	localStorage.setItem("actUT", actUT);
	$('#CadCam').load('content/cadcam.php');
	$('button').removeClass('actUT');
	$(document.activeElement).addClass('actUT');
};

function cadORcam(cadcam){
	// Store Cad or Cam and show Main Topic
	localStorage.setItem("cadcam", cadcam);
	var actSite = localStorage.getItem("actSite");
	var actUT = localStorage.getItem("actUT");
	var cadcam = localStorage.getItem("cadcam");
	$('#maintopic').load('content/maintopic.php #' + actSite + '-' + actUT + '-' + cadcam);
	$('button').removeClass('actCadCam');
	$(document.activeElement).addClass('actCadCam');
};