Javascript Show/Hide, Fade

Fade Toggle

<style>
.show, .hide{
	transition: opacity 600ms;
}
.show {
  opacity: 1;
}
.hide {
  opacity: 0;

}
</style>
<button id="fade">Fade</button> <button id="toggle">Toggle</button>
<div id="mydiv" class="show">Some content</div>
<script>
document.getElementById("fade").addEventListener('click', () =>{
    let div = document.getElementById("mydiv");
    if(div.classList.contains('show')){
        div.classList.add('hide');
        div.classList.remove('show');
    }else{
    	div.classList.add('show');
    	div.classList.remove('hide');
    }

});
document.getElementById("toggle").addEventListener('click', () =>{
    let div = document.getElementById("mydiv");
    if(div.style.display == ''){
    	div.style.display = 'none';
    }else{
    	div.style.display = '';
    }

});
</script>