Our hypothetical case for this chapter is about hiding class elements.
Our client’s research showed that websites should avoid using meaningless design elements because that burdens cognitive load.
Numerous surveys showed that users on their website find the design very confusing.
Business case: Hiding class elements
We use this insight to create a testing hypothesis:
“Because we saw that users find our website confusing, we expect that hiding meaningless design elements will cause an increase in sales. We’ll measure this using conversion-rate.”
We are going to test this hypothesis with the following change:
var logo = document.querySelector(".custom-logo"); var title = document.querySelector(".entry-header-inner > h1"); logo.style.display = "none"; title.style.visibility = "hidden";
The breakdown starts by going over all the new syntax in the example. Future articles will not repeat any of the discussed syntaxes. All the explanations have a link to the full documentation of the syntax if you need more information.
var creates a container for storing data values. This keyword will declare a variable in the global or function scope.
logo is an identifier. This is a sequence of characters that identifies variables, functions, and property’s.
= is an assignment operator and is used to assign a value to the variable.
document.querySelector(selector) returns the first element it matches in the DOM tree. You can select elements by giving a selector as the argument.
.custom-logo is an example of selector. This is the type of selector that we use to select the logo. We tell the method to match the first element with the class custom-logo. You can look for selectors with the chrome browser.
Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS) opens the inspect element feature.
Hovering over elements will highlight the code that matches it. Here we can see how the custom-logo class is attached to the logo.
.entry-header-inner > h1 is another example of a selector. This example selects the h1 child element of the entry-header-inner class.
.style is a method of an element that allows you to change the CSS styling. It’s followed by another method that specifies the CSS property that you want to change.
.display is a CSS property that controls if an element is treated as a block or inline. It also controls the layout of its children.
= “none” is a display value that removes an element from the accessibility tree. This value makes sure it doesn’t get rendered on the web page anymore.
.visibility is the CSS property that allows you to show or hide elements without the layout shifting.
“hidden“ is the visibility value that hides the elements without affecting the layout.
In this part, we discuss the actual logic of all the lines of code. I will try to describe what happens in every line of the code.
var logo = document.querySelector(".custom-logo");
The first line of code saves the penguin to a variable with the name logo. It does this by selecting the logo with the querySelector. The logo has the class custom-logo, so this is used as the parameter in the querySelector method. We want to save it to the variable so we can easily hide it later.
var title = document.querySelector(".entry-header-inner > h1");
The second line of code saves the title of the page to the title variable. It looks inside the element with entry-header-inner class to find the first h1.
logo.style.display = "none";
The third line of code hides the logo using the display method. This way will shift the layout up.
title.style.visibility = "hidden";
The fourth and last line of code hides the logo using the visibility method. This way will not shift the layout up. Notice how the title keeps its space even though it’s hidden.