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

 

 

 

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

 

 

 

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.

 

 

LINKS & REFERENCES

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

 

INFOGRAPHIC CHEAT SHEET