Simple Show/Hide with JS & CSS

I am frequently asked by front end developers what the best technique is for showing and hiding a div within a web page.  While this can be accomplished many ways, I will outline the technique that I use most often.  It involves adding and removing a class from the DOM node you are looking to show or hide.  The code shown can be used as a starting point, and can be enhanced once you understand the basics.

Note: if you would like to skip the tutorial and jump right to the code, head on over to github.  If you want to see the code in action, you can try it out here.  The demo will run on mobile devices as well, but be aware that I haven’t bothered removing the 300ms delay.

Now on to the tutorial…

Step 1: the HTML

First, you will need to set up your tags properly.  We will set up two div’s of note: a div that acts as a toggle button, and a toggle-able content area:

<div id="mainContent" class="mainContent">
  <h1>Easy Show/Hide Using CSS</h1>
  <div id="toggleButton" class="toggleButton">Show Content</div>
<div id="toggledContent" class="toggledContent hide">This cotent area can contain anything - usually it is a menu of some sort.<br><br>The technique used involves adding or removing a class from the node you are looking to hide or show, respectively.</div>

Observe the toggledContent tag includes a “hide” class. This is necessary since we would like the default state of the div to be hidden.

Step 2: the CSS

Next, you will need to define the classes. Although tangential to this post, you will notice that I subscribe to the notion of never using ID’s to style the code, even if there is only one ID using a single class. You can read more about it here and here.

	background: #fff;
	font-family: OpenSans;

	padding: 0;
	margin: 20px 0;
	font-size: 20px;
	color: #090;

	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 320px;
	height: 480px;
	background: #fff;
	text-align: center;

	width: 140px;
	height: 60px;
	line-height: 60px;
	margin: 0 auto;
	background: #090;
	color: #fff;
	border: 3px solid rgba(255, 255, 255, 0.5);
	border-radius: 30px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;

	position: absolute;
	z-index: 999;
	top: 150px;
	left: 0;
	width: 200px;
	height: 300px;
	margin-left: -3px;
	padding: 10px;
	background: #257;
	color: rgba(255, 255, 255, 0.9);
	border: 3px solid rgba(255, 255, 255, 0.5);
	border-radius: 0 20px 20px 0;
	-webkit-transform: translateX(0);
	-webkit-transition: all .3s ease;

	-webkit-transform: translateX(-100%);

The important bits of this code can be seen when you scroll down to the bottom. You will see .toggledContent, which contains styling as well as animation properties, transform and transition. The transform, in this case, is used to set the position of the div when it is NOT hidden (i.e., when the .hide class is removed from the tag – more about this, later). The transition is used to direct the browser which transforms are to be transitioned (in this case, ‘all’), how long the transition should last (in this case, ’300 milliseconds’), and how to transition (in this case, ‘ease’ – for more elaborate values, check out the nifty online tool ceaser). Likewise, the more specific .toggledContent.hide contains its own transform property. Its purpose is to shift the toggledContent div along the x-axis by -100%. Since the starting x coordinate is 0, as defined in the “left” property of the .toggledContent class, the transform will effectively shift the content out of the viewport.

Step 3: the JavaScript

Tying everything together, per usual, is your JavaScript code. The idea here is for your toggleButton div to listen for when the onclick event is fired, the result of which is to show or hide the toggledContent div.

var contentHidden = true,
	$toggleButton = document.getElementById('toggleButton'),
	$toggledContent = document.getElementById('toggledContent');
	// equivalent jQuery code:
	// $toggleButton = $('#toggleButton');
	// $toggledContent = $('#toggledContent');

// jQuery equivalent: $
$toggleButton.onclick = function()

function showHideContent()
	if (contentHidden)
		contentHidden = false;
		$toggledContent.className = "toggledContent";
		// equivalent jQuery code:
		// $toggledContent.removeClass('hide');
		contentHidden = true;
		$toggledContent.className = "toggledContent hide";
		// equivalent jQuery code:
		// $toggledContent.addClass('hide')

Here, you will notice a function called “showHideContent”. This function simply toggles the state of the toggledContent div. It accomplishes this by adding or removing the “hide” class from the div tag. The effect of doing so is to trigger the transform contained in the default .toggledContent class or the transform contained in the .toggledContent.hide CSS code.

Putting it All Together

The UI consists of a header, a single button, and an initially hidden content area. The button, when clicked, will toggle the state of a content area. If it’s hidden, it will show it. If it’s being shown, it will hide it. Pretty simple, eh?

See the Pen Easy Show/Hide Using CSS & JS by Gene Loparco (@gloparco) on CodePen.

Feel free to comment on this technique or to post your own techniques for accomplishing the same thing.

This entry was posted in Technology and tagged , , . Bookmark the permalink.

2 Responses to Simple Show/Hide with JS & CSS

  1. Nice tutorial, very well put together, still a novice on JS, and love to learn new techniques to improve my language skills. Thanks.

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>