Now You See It, Now You Don’t: Two Ways To Toggle Using Vanilla JavaScript

In this tutorial, I walk through two methods you could use to change the content of a webpage by manipulating the Document-Object Model (“DOM”) in response to user click events.

Here’s what we’re looking to achieve:

• On the load of a page, a user should see a button that says “Show Dog”
• When the button is clicked, an ​<img>​ element should be toggled on and appear on the page. The text of the button should also toggle to “Hide Dog”
• When the button that now says “Hide Dog” is clicked, the ​<img>​ element should be toggled off and the text of the button should toggle back to “Show Dog"

Let’s take a look at our HTML

In the head of our document on line 4, we link to an external styles sheet, which will set the CSS for our image when our page loads.

We also have a link to a JavaScript file on line 5, ​index.js​ which contains the code that responds to a user’s click event.

Line 9 defines the ​<button>​ element that we plan to target.

Line 13 defines the ​<img>​ element that we want to show and hide. The id of this image is set to id = “dog-pic"​ in order to make it easier to target with CSS and JavaScript.

Moving on to the CSS

We want the ​<img>​ element that we’re targeting to be initially hidden until a user clicks a button. We can achieve this by setting the element’s ​display​ property on our style sheet.

On lines 1–3, we use the CSS id selector, ​#​, to target the element with an id of ​dog-pic​ and set its display​ property to ​none. These styles will be applied when the page loads

Diving into the JavaScript

Here’s where the magic happens.

The code below uses two different techniques to toggle our ​<img>​ and ​<button>​ elements in response to a user click.

The first technique uses a global variable and control flow to hide and unhide our image.

The second technique uses the key-value pairs of an object to cycle between the two options for the text — “Show Dog” and “Hide Dog” — that should be displayed on our button.

Let’s walk through the code, step-by-step:

Step 1

On line 1 we use the ​.querySelector()​ method on the ​document​ object to grab the first HTML element that we’re targeting—the <img>​ element with an ​id​ of ​dog-pic​— and save it to a variable, ​dogPic​.

Step 2

On line 2, we again use the .querySelector()​ method to grab the <button>​ element and save it to the variable ​button​.

Step 3

On line 4, we add an event listener to the button that listens for a ​click event​. When the click event is fired by a user clicking the button, an anonymous callback function gets invoked, which first executes the expression defined on line 6, ​showDog = !showDog.

This expression flips the current Boolean value of the ​showDog​ variable defined on line 17, which our anonymous callback function has access to through the global scope. ​showDog’s initial value is set to ​false​, so the first time this callback function is invoked by a user clicking the button, the expression showDog = !showDog causes showDog = false​to be flipped to ​showDog = true​.

Step 4

After the value of the ​showDog​ variable gets flipped, the ​if/else​ statement on lines 7 to 11 then execute one of two blocks, depending on the current value of the ​showDog​ variable:

• If ​showDog​ is equal to ​true​, then the code on line 8, dogPic.style.display = "inline-block”​ is executed. This sets the value of the ​display​ property of the ​<image>​ element to ​inline-block, which overrides the <image>’s initial value of ​display: none​ that was set in our external style sheet. By changing the value of the ​display​ property, we unhide our hidden image.
• If ​showDog​ is equal to ​false​, then the code on line 10, dogPic.style.display = "none”​, is executed. This sets the value of the ​display​ property back to ​none​, re-hiding the image.

The reason we’re able to toggle between showing and hiding the image using this technique is because inline styles, i.e. styles defined in HTML on the DOM, override styles defined in external style sheets.

Remember, our external style sheet sets the the image’s display property to ​display: none;​, causing it to be hidden. Then, when the user clicks the “Show Dog” button, our JavaScript injects an inline style where there previously wasn’t one, allowing us to override our ​display : none;​ setting on our style sheet, thereby unhiding the image.

To better illustrate this point, below is a .gif of what’s happening on the DOM when the user clicks the button.

(1) When the page loads, the <image> element is hidden by the CSS on an external stylesheet—there is no inline styling. (2) When the “Show Dog” button is pressed, JavaScript sets inline style on the <image> element to style= “display: inline-block”​, which overrides the external styles and unhides the image. (3) When the image is visible, pressing the button again re-hides the image by setting the inline style to style= “display: none”

Step 5

Line 13 demonstrates the second toggling technique, which uses the key-value pairs of the buttonStates​ object defined on line 19 to set the inner text of the button after each click.

This buttonStates​ object has both possible button inner-text values—“Show Dog” and “Hide Dog”—as keys, each of which has the alternative button inner-text value as its corresponding value.

When the page loads and the dog is hidden, the initial inner-text of our button is “Show Dog”. Upon clicking the “Show Dog” button, steps 1 -4 run, unhiding the image.

Then, the current value of the button inner-text gets passed as a key to the buttonStates​ object. If ​button.innerText​ is currently “Show Dog” on the DOM, then ​buttonStates[button.innerText]​ evaluates to buttonStates["Show Dog"] , which then returns the value “Hide Dog,” changing the value of the button inner-text on the DOM.

Conversely, if ​button.innerText​ is currently “Hide Dog,” then buttonStates[button.innerText]​ returns “Show Dog, ”resetting the value of the button inner text.