Show/Hide HTML Elements With Animation (Simple Examples)

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

This is a random block of text.

 

1A) THE HTML

1a-fade.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

1b-fade.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

1c-fade.js
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

This is a random block of text.

 

2A) THE HTML

2a-slide.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

2b-slide.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”.

  1. Turn the element into a “box” instead.
  2. Hide it off the screen with position: fixed and left: -999px.
  3. Same old CSS animation.
  4. Lastly, bring the element back onto the screen with left: 5px.

 

2C) THE JAVASCRIPT

2c-slide.html
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

3a-collapse.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

3b-collapse.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

3c-collapse.html
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

 

INFOGRAPHIC CHEAT SHEET

Show and Hide Elements With CSS JS (Click to enlarge)

 

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!

1 thought on “Show/Hide HTML Elements With Animation (Simple Examples)”

Leave a Comment

Your email address will not be published. Required fields are marked *