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?

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

 

 

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.

 

 

 

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

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

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.

 

 

 

LINKS & REFERENCES

• CSS Transition – MDN
• Examples on CodePen
  • Fade In & Out
  • Slide In & Out
  • Expand & Collapse

 

INFOGRAPHIC CHEAT SHEET