HTML CSS JS
SHOW & HIDE ELEMENTS WITH ANIMATIONS
HTML ELEMENT <div id="fade">TEXT</div>
FADE IN & OUT
01
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 IN & OUT
02
#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");
COLLAPSE & EXPAND
03
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");