HTML CSS JS
(quick & simple examples)
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>
CSS - OFF SCREEN BOX #slide { background: red; color: white; position: fixed; bottom: 5px; left: -999px; transition: all 0.5s; visibility: hidden; }
CSS - MOVE BOX 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; }
JAVASCRIPT TOGGLE .HIDE CSS CLASS document.getElementById("fade").classList.toggle("hide");
CSS HIDE #collapse.hide { height: 0; opacity: 0; overflow: hidden; }