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 totrue
, then the code on line 8,dogPic.style.display = "inline-block”
is executed. This sets the value of thedisplay
property of the<image>
element toinline-block
, which overrides the<image>
’s initial value ofdisplay: none
that was set in our external style sheet. By changing the value of thedisplay
property, we unhide our hidden image. - If
showDog
is equal tofalse
, then the code on line 10,dogPic.style.display = "none”
, is executed. This sets the value of thedisplay
property back tonone
, 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.
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.