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 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Show & Hide Useful Bits & Links
The End

 

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

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) HIDDEN BY DEFAULT */
  /* OUT OF SCREEN - SET THE POSITION AS YOU WISH */
  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("deer.jpg");
  background-size: cover;
 
  /* (A2) DIMENSIONS */
  width: 100%;
  height: 200px; /* 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.

 

 

USEFUL 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!

Leave a Comment

Your email address will not be published.