Categories
Condition JavaScript Onclick

JavaScript for optimizers #11: Show and hide divs on click

In this article, we want the user to show and hide divs on click.

Our hypothetical case for this chapter is about giving the user the freedom to hide the elements they don’t want to see.

Business case: Show and hide divs on click

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that users get frustrated when they cannot hide elements, we expect that giving them that option will cause an increase in sales. We’ll measure this using conversion-rate.”

To test this hypothesis, we’re going to apply the changes below:

We can hide and show the video
We can hide and show the video

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var getToggleVideoButton = document.querySelector(".toggle > a");
var getVideoDiv = document.querySelector(".is-provider-youtube");

//eventlisteners
getToggleVideoButton.addEventListener("click", toggleVideo);

//functions
function toggleVideo() {
  if (getVideoDiv.style.display === "none") {
    getVideoDiv.style.display = "block";
  } else {
    getVideoDiv.style.display = "none";
  }
}

Breakdown of the code

1. New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

.addEventListener(type, function) is a method that calls a function whenever an specific event is triggered. It’s connected to an EventTarget such as an element, document, or window. Common ways for using this method are activating functions with clicks or other mouse movements.

2. Logic

var getToggleVideoButton = document.querySelector(".toggle > a");

We start by selecting the “Toggle video” anchor element with the querySelector method. We assign this button to the newly declared getToggleVideoButton element.

The anchor element is child of the div element.
The anchor element is child of the div element
var getVideoDiv = document.querySelector(".is-provider-youtube");

We also need the video element in order to hide it. We select the video element with the querySelector method and assign it to the newly declared getVideoDiv variable.

You can’t select elements within an iframe
getToggleVideoButton.addEventListener("click", toggleVideo);

When someone clicks the button we want a function to trigger. We can do this by using the .addEventListener method on the getToggleVideoButton variable.

The first argument we pass down in the method is “click”. This way, it will listen for clicks. The second argument is the name of the function we want to trigger when the event happens. We will call this function toggleVideo.

function toggleVideo() {

We create the toggleVideo function in this line of code. It doesn’t need any arguments, so we will leave the brackets empty.

if (getVideoDiv.style.display === "none") {

The button needs to either hide or show the video depending on the current visibility of the video. 

We can check if the video is visible by checking the display value of the element. If this is equal to “none”, it means that the video is hidden.

We use this in our if statement to run the code between the curly brackets. 

getVideoDiv.style.display = "block";

This line will make the video appear if it currently has the value “none”.

The video appeared.
The video appeared
} else {

If the element is already visible, we want to hide the element. If the if statement returns false, it will run the code between these curly brackets.

getVideoDiv.style.display = "none";

This line of code will hide the element on the page.

The video is hidden
The video is hidden
}

Then close the else statement once we finished applying our change.

}

Finally, we close our function.

3. Exercise

The best way to learn JavaScript is to try it. 

I want you to change the button, so the text shows what it is going to do. Will it show or hide the video? Shoot me a message on LinkedIn to let me know what you think! Check out the solution.

The text of the button shows the action on click
The text of the button shows the action on click

I posted the previous episode on Convert:

JavaScript for Optimizers #10: Adding a DateTime Picker