HTML CSS JS

SHOW & HIDE ELEMENTS WITH ANIMATIONS

HTML ELEMENT <div id="fade">TEXT</div>

CSS TRANSITION & HIDE #fade { transition: all 1s; } #fade.hide { visibility: hidden; opacity: 0; }

JAVASCRIPT TOGGLE HIDE CSS CLASS document.getElementById("fade").classList.toggle("hide");

HTML ELEMENT <div id="slide">TEXT</div>

#slide {   CSS - BOX   background: red; color: white;   CSS - OFF SCREEN   position: fixed; bottom: 5px; left: -999px;   CSS ANIMATION   transition: all 0.5s; visibility: hidden;  }

SHOW - BRING BACK ON SCREEN #slide.show { left: 5px; visibility: visible; }

JAVASCRIPT TOGGLE SHOW CSS CLASS document.getElementById("slide").classList.toggle("show");

HTML ELEMENT <div id="collapse">TEXT</div>

CSS DIMENSIONS & TRANSITION #collapse {   width: 100%; height: 200px;   transition: all 0.5s; } CSS HIDE  #collapse.hide { height: 0; opacity: 0; overflow: hidden; }

JAVASCRIPT TOGGLE HIDE CSS CLASS document.getElementById("fade").classList.toggle("hide");