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 as 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!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
SHOW/HIDE HTML ELEMENTS WITH ANIMATION
All right, let us now get into more examples on 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;
/* (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.
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 🙂