JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div id="div1">1</div>
<div id="div2">2</div>
<a id="change" href="#">Change</a>

CSS

#div1{background-color:#cdd;z-index:1;}
#div2{background-color:#ff0;}
div{opacity:1;width:200px;height:200px;transition:all 1s ease;position:absolute;margin:30px 0;}
.hide{opacity:0;visibility:hidden;}

JavaScript

/*
Vanilla JS*/
document.getElementById('change').addEventListener('click',function(e){
    e.preventDefault();   
    var div1 = document.getElementById("div1");
    if(div1.getAttribute('class')!=="hide"){
    	div1.setAttribute('class','hide');
    }else{
    	div1.setAttribute('class','');
    }    
})


/* jQuery 1.7+ 
$('#change').on('click',function(){
	$("#div1").toggleClass('hide');
});
*/