JSFiddle - React, Tailwind, and code Playground
HTML
<a id="boxes">click</a>
JavaScript
jQuery(function(){
jQuery('.blocked a').click(function(event) {
event.preventDefault();
});
if (!window.console) console = {log: function(text) {alert(text);}};
jQuery('#boxes').click(function(e) {
var currentID = e.target.id;
console.log(currentID);
if(currentID == "btn1"){
var boxid = "#box1";
console.log(boxid);
}
if(currentID == "btn2"){
var boxid = "#box2";
console.log(boxid);
}
if(currentID == "btn3"){
var boxid = "#box3";
console.log(boxid);
}
if(currentID == "btn4"){
var boxid = "#box4";
console.log(boxid);
}
if(currentID == "btn5"){
var boxid = "#box5";
console.log(boxid);
}
if(currentID == "btn6"){
var boxid = "#box6";
console.log(boxid);
}
if(currentID == "btn7"){
var boxid = "#box7";
console.log(boxid);
}
if(currentID == "btn8"){
var boxid = "#box8";
console.log(boxid);
}
if(currentID == "btn9"){
var boxid = "#box9";
console.log(boxid);
}
jQuery('#box1').fadeOut();
jQuery('#box2').fadeOut();
jQuery('#box3').fadeOut();
jQuery('#box4').fadeOut();
jQuery('#box5').fadeOut();
jQuery('#box6').fadeOut();
jQuery('#box7').fadeOut();
jQuery('#box8').fadeOut();
jQuery('#box9').fadeOut();
jQuery(boxid).fadeIn(1600);
jQuery(boxid).delegate("a.hoverlink", "hover", function(event){
var $img = jQuery(this).parent("li").find('img');
var image = jQuery(this).attr('data-img');
jQuery('.defaultimg').stop(true, true).fadeOut();
if( event.type === 'mouseenter' ) {
if($img.length){
$img.show();
}else{
...