[CSS] How to use visibility?

You can hide an element using the visibility CSS property.

Properties that can be hidden include display and opacity.

Many people may not know what the difference is or how to use them properly.

This time, for those who want to master how to use the CSS property visibility,

I will explain according to the above items.

By reading this article, you will be able to understand how to use CSS visibility from basic to advanced .

Please read to the end!

What is visibility? what property?

visibility is a property that specifies whether an element is shown or hidden .

Specifically, it is described as follows.

Specify visibility for some elements with CSS.

.sample {
  visibility: hidden;
}

Notice that only the second element is hidden.

It’s just hidden, it doesn’t fill in the elements behind it.

The layout remains the same, leaving a gaping space for the hidden elements.

Use “display:none” if you want to remove the element and fill in the elements behind it.

The difference between the two will be explained in detail in a later section.

The following three values ​​can be specified for visibility.

Let’s take a closer look at each value.

visible

visible is the default, which means the element is visible .

This value is applied if visibility is not specified.

hidden

hidden makes the element invisible .

As mentioned above, the layout is unaffected, leaving a blank space the size of the hidden element.

The hidden element will not be focused even when the tab key is operated.

Not only will it lose focus, but it will also be invisible to screen readers providing visual assistance.

collapse

collapse hides rows, columns, cells, etc. of a table element .

This also leaves blank space for the hidden elements, but if you hide the line, the line below will be closed and displayed .

I will write the code in details.

<table>
  <tr>
    <td>1-1</td>
    <td class="collapse">1-2</td>
    <td>-3</td>
    <td>-4</td>
  </tr>
  <tr class="collapse">
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr><td>3-1</td>
    <td class="collapse">3-2</td>
    <td class="collapse">3-3</td>
    <td>-4</td>
  </tr>
</table>

CSS is described as follows.

table, td {
  border: 1px solid #333;
}
.collapse {
  visibility: collapse;
}

The tr element in the second row and “cell 1-2”, “cell 3-2”, and “cell 3-3” are set to hidden.

The second line is hidden and displayed with white space.

The part where the other three cells were is left blank.

Other elements have the same behavior as hidden.

visibility and other properties

When you hear that you can hide an element, you probably remember how to use other properties.

There are two properties that can hide an element:

By setting “opacity: 0” and “display: none” respectively , the element will be hidden .

Visibility and behavior are similar, and it’s easy to confuse them.

Here, I will explain the difference between these two and visibility.

Difference between “opacity: 0” and “visibility: hidden”

opacity is the property that specifies the opacity of the element.

opacity:1 is the base and is completely opaque.

Lowering this value will gradually increase the transparency, with 0 being completely transparent.

It is used when you want to display transparent objects by actions such as hovering the mouse, or when you want to display background images transparently.

The difference with visibility:hidden is that in the case of opacity, it only becomes transparent, so in the case of a element or input element, tab focus hits, and clicking a link will move the page.

Since the element hasn’t disappeared, it will still be recognized and read by screen readers.

visibility:hidden is nice because it has been removed from the accessibility tree.

Let’s see the difference between the two in action.

<p>「visibility:visible」⇒<a href="#"></a></p>
<p>「visibility:hidden」⇒<a href="#" class="hidden"></a></p>
<p>「opacity:0」⇒<a href="#" class="opacity1"></a></p>
<p>「opacity:0.5」⇒<a href="#" class="opacity2"></a></p>

.hidden {
  visibility: hidden;
}
.opacity1 {
  opacity:0;
}
.opacity2 {
  opacity:0.5;
}

The first line is displayed normally because nothing is specified.

The 2nd and 3rd lines are hidden. However, opacity: 0 is focused.

You can tell the link is there because the cursor changes shape when you hover the mouse over it.

I put the semi-transparent one last for comparison.

Difference between “display:none” and “visibility:hidden”

display is a property that sets how the element is displayed.

It is used when you want to treat it as a block element or an inline element.

It can also be used to specify the display of child elements, such as applying flexbox to the order of child elements.

Remove the element itself by specifying display:none.

It is removed from the layout and the following elements are displayed packed together.

Let’s actually write the code and check it.

.hidden {
  visibility: hidden;
}
.not-display {
  display: none
}

The 2nd and 3rd lines are hidden.

However, there is only one blank space between lines 1 and 4.

Characteristics of visibility to remember

Now you know the basic usage of visibility and the values ​​you can specify.

As an application, I would like to introduce two features of visibility that you should keep in mind.

If the descendant element was visible

Even if “visibility:hidden” is specified for the parent element, if visible is specified for the descendant element, the descendant element will be displayed .

Hide the parent element of the above code with hidden and specify visible for the child element.

.parent {
  visibility: hidden;
}
.child {
  visibility: visible;
}

The text of the parent element is hidden, and the text of the child and grandchild elements below it is displayed.

If you change the CSS selector from child to grandchild, only the grandchild elements will be displayed.

Please try various things.

Animatable properties

visibility is a property that supports CSS animations.

There are two ways to use CSS animation: transition properties and keyframes.

In principle, only properties that change numerically can be animated.

For example, if you want to change the width property of the width, you can handle numerical changes, but you can’t use it for changes like “10px ~ auto”.

Unlike this principle, visibility is a property that does not change numerically but supports animation .

It is common to use the opacity mentioned above for animations of showing and hiding, but there are concerns such as being able to focus even when it is not displayed, or being read out by a screen reader. there is a point.

Combining the two allows you to treat elements as if they weren’t there when they were hidden.

Let’s actually write the code.

<input type="checkbox" id="check"><label for="check"></label>
<a href="#" class="sample">CLICK</a>

.sample {
  display: block;
  width: 150px;
  height: 30px;
  background: #ff7f50;
  border-radius: 7px;
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
  color: #fff;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
}
input:checked ~ .sample {
  visibility: visible;
  opacity: 1;
}

I created a checkbox and implemented it so that a link button appears when the checkbox is checked.

When the link button is hidden, it does not receive focus and the cursor does not change.

When displayed, it will act as a link button.

In the method using display:none, it is displayed in an instant, so this kind of operation is not possible.

Also try if you remove the visibility part of the above code.

Even when completely transparent, the link button still exists, so you can see the cursor change when you hover the mouse over it.

Show/hide using JavaScript

If you use JavaScript, you can switch between showing and hiding elements by user operations such as button clicks .

As mentioned earlier, similar behavior is possible when setting using input elements or mouse hover, but more complex settings are possible using JavaScript.

Here’s some sample code that you can use in action.

Switch display/hide with button click

Create a sample to show/hide an element with a button click using visibility .

Here we use the button element.

Button elements have advantages such as easier design than buttons made with input elements.

<div id="example"</div>
<button type="button" class="button" onclick="clickBtn()">/</button>

.button {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #008b8b;
  color: #fff;
  padding: 5px 15px;
}
#example {
  width: 200px;
  padding: 5px 15px;
  border: solid 2px #ccc;
  border-radius: 5px;
}

CSS specifies appearance so that it is easy to understand.

Implement JavaScript here. Create it in a separate file or write it directly in HTML using the script tag.

document.getElementById("example").style.visibility ="hidden";
function clickBtn(){
    const example = document.getElementById("example");
    if(example.style.visibility=="visible"){
        example.style.visibility ="hidden";
    }else{
        example.style.visibility ="visible";
    }
}

The first line “document.getElementById” retrieves the element with the ID value “example” and specifies hidden for the visibility of the style.

The onclick attribute is specified for the HTML button element so that an event is generated when the button is clicked.

The contents of function clickBtn() { ~ } are the contents of the event to be executed.

When clicked, the visibility of the element is set to be hidden if it is visible, and visible otherwise.

This implementation toggles the visibility of the button each time you click it.

click to open accordion

Create an accordion that opens on click.

An open accordion with three items, each animated separately .

<button>で</button>
<div id="mymenu" class="show">
<ul>
  <li>
    <p></p>
  </li>
  <li>
    <p>3</p>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
</ul>
</div>

button {
  appearance: none;
  border: 0;
}
button {
  display: block;
  width: 280px;
  height: 50px;
  cursor: pointer;
  background: #3eb370;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
}
ul {
  padding:0;
  margin:0;
  list-style-type: none;
}
li,p {
  margin:0;
}
ul > li {
  width: 280px;
  border: 0;
  padding: 0;
  background-color: #eee;
  text-align: center;
  transition: 0.3s;
}
ul.open > li {
  padding: 13px 0;
  border-top: solid 1px #fff;
}
ul > li > p {
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
ul.open > li > p {
  line-height: 1.5;
  opacity: 1;
  visibility: visible;
}

JavaScript is described as follows.

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('ul').classList.toggle('open');    
});

Unlike the previous example, we specify visibility:hidden in CSS.

Style the element closed and open, and animate it when clicked.

document.querySelector gets the element for the matching CSS selector.

classList.toggle is a method to toggle the class name.

In the code above, when the button element is clicked, the class name of the ul element changes to “open”.

clicked element disappears

Create a sample that creates multiple numbered elements and disappears when the element is clicked .

<div class="sample">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

.sample {
  display: flex;
  border-radius: 5px;
}
.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: #4169e1;
  border-radius: 50%;
  color: #fff;
  line-height: 50px;
  text-align: center;
}

JavaScript is described as follows.

const item = document.getElementsByClassName('item');
for (let i = 0; i < item.length; i++) {
    item[i].addEventListener('click', () => {
        item[i].style.visibility ="hidden";
    }, false);
}

“document.getElementsByClassName(‘item’)” on the first line retrieves all the elements whose class name is “item”.

The acquired element can be retrieved by specifying a number such as item[2].

addEventListener is a method that allows you to specify event handling.

element.addEventListener( ‘event type’, function, false )

Decide the type of event as described above, and specify the function to do what kind of processing when it occurs.

The sample code specifies what to do when clicked. Implemented so that the visibility becomes hidden when clicked.

By using the for statement, this event processing is defined for all items.

fade in on scroll

Create a process that appears softly from the middle when scrolling the page .

<div id="fadein"></div>

#fadein {
  width: 300px;
  height: 300px;
  margin: 100vh auto;
  background: #7fffd4;
  transform: translateX(50px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
#fadein.active {
  transform: translateX(0px);
  opacity: 1;
  visibility: visible;
}

JavaScript is described as follows.

var elem = document.getElementById('fadein');
window.addEventListener('scroll', () => {
    const scroll = window.pageYOffset || document.documentElement.scrollTop;
    const rect = elem.getBoundingClientRect().top;    
    const offset = rect + scroll;
if (scroll > offset - window.innerHeight + 200) {
     elem.classList.add('active');
    }
});

Use window.addEventListener to define event handling when scrolling.

window.pageYOffset gets the vertical scroll distance.

If you also write document.documentElement.scrollTop for browsers that do not support it, the value obtained will be used.

getBoundingClientRect is a method to get the element’s position from the top left of the viewport (display screen).

Return the position of the top edge of the elem by elem.getBoundingClientRect().top.

window.innerHeight is the screen height.

It is set to fade in and appear when the element reaches a height of about 200px.

Summary: Let’s use CSS visibility

This time, we have explained in detail about the visibility of CSS properties, from the basics to applications such as switching using JavaScript .

You also learned about the differences between properties that behave similarly.

You may not use it often, but it’s a property that shows its power when you need it most, so be sure to take advantage of it.