Welcome to a tutorial on how to show/hide HTML elements with animations. So you need to toggle the visibility of an element, but with bells and whistles?
Here is an easy example to show/hide an HTML element with a fade effect:
- The HTML element –
<div id="fade">TEXT</div>
- The CSS classes:
#fade { transition: opacity 1s; }
.hide { visibility: hidden; opacity: 0 }
- Lastly, just toggle the
hide
CSS class using Javascript –document.getElementById("fade").classList.toggle("hide");
Yes, setting the CSS transition
is all it takes to create the animation magic. But at the time of writing, it is impossible to animate display: none
, thus the “roundabout” way to set the visibility
and opacity
. Read on for more examples!
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
SHOW/HIDE HTML ELEMENTS WITH ANIMATION
All right, let us now get into more examples of toggling the visibility of an HTML element, with animations.
EXAMPLE 1) FADE IN & OUT
FADE DEMO
1A) THE HTML
<div id="fade">This is a random block of text.</div>
<input type="button" value="Toggle" onclick="toggle()">
These shouldn’t be too much of a mystery. Just a dummy <div>
and <input type="button">
to toggle the fade effect.
1B) THE CSS
/* (A) SET CSS TRANSITION */
#fade { transition: all 1s; }
/* (B) HIDE */
#fade.hide {
visibility: hidden;
opacity: 0;
height: 0; /* optional */
}
This is the same as the snippet in the introduction, but take note of the additional height: 0
here. Yes, we can hide an element using visibility: hidden
, but it will still “occupy space”. Use height: 0
if you want to collapse the element on hiding.
1C) THE JAVASCRIPT
function toggle () {
document.getElementById("fade").classList.toggle("hide");
}
Just a one-line Javascript to toggle the hide
CSS class on the HTML element.
EXAMPLE 2) SLIDE IN & OUT
SLIDE DEMO
2A) THE HTML
<div id="slide">This is a random block of text.</div>
<input type="button" value="Toggle" onclick="toggle()">
Same old <div>
and <input type="button">
.
2B) THE CSS
#slide {
/* (A) TURN INTO A BOX */
background: #cf2f1d;
padding: 10px;
border: 1px solid #b52110;
color: #fff;
font-weight: bold;
/* (B) DEFAULT - HIDE OUT OF SCREEN */
position: fixed;
bottom: 5px;
left: -999px;
/* (C) CSS ANIMATION */
transition: all 0.5s;
visibility: hidden;
}
/* (D) SHOW - BRING ELEMENT BACK ON SCREEN */
#slide.show {
left: 5px;
visibility: visible;
}
This is an entirely different approach from the “fade effect”.
- Turn the element into a “box” instead.
- Hide it off the screen with
position: fixed
andleft: -999px
. - Same old CSS animation.
- Lastly, bring the element back onto the screen with
left: 5px
.
2C) THE JAVASCRIPT
function toggle () {
document.getElementById("slide").classList.toggle("show");
}
Same old “toggle” CSS class, except this is show
instead.
EXAMPLE 3) COLLAPSE
COLLAPSE DEMO
3A) THE HTML
<div id="collapse" class="show"></div>
<input type="button" value="Toggle" onclick="toggle()">
Same old <div>
and <input type="button">
. Yet again.
3B) THE CSS
/* (A) CONTENT BOX */
#collapse {
/* (A1) BACKGROUND IMAGE */
background-image: url("show-hide.jpg");
background-size: cover;
background-position: center;
/* (A2) DIMENSIONS */
max-width: 700px; /* optional */
height: 300px; /* fixed size required */
/* (A3) CSS TRANSITION */
transition: all 0.5s;
}
/* (B) HIDE */
#collapse.hide {
height: 0;
opacity: 0;
overflow: hidden;
}
This one should be self-explanatory too – We are just toggling height: 0
to collapse and expand a container. Yes, for CSS animation to work with width height
, they cannot be set to auto
.
3C) THE JAVASCRIPT
function toggle () {
document.getElementById("collapse").classList.toggle("hide");
}
I don’t think this needs explanation by now.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
SORRY FOR THE ADS...
But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.
Buy Me A Coffee Code Boxx eBooks
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- CSS Transition – MDN
- Examples on CodePen
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Very nice and beautiful, thank you 🙂