HTML CSS JS

SHOW & HIDE HTML ELEMENTS

(quick & simple examples)

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

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");

COLLAPSE & EXPAND

03

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; }