How to hide Web page elements
Tags: html, css, javascript, a11y
Published: 2020-06-24 21:34:59

---
title: How to hide Web page elements
published: true
description: A brief description on how to hide HTML elements the right way
tags: html, css, javascript, accessibility
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hkis7sxdqw3wrs260yns.jpg
---

> Cover photo by [Road Trip with Raj](https://unsplash.com/@roadtripwithraj) on [Unsplash](https://unsplash.com/).

##__Introduction__

When you have a Web page there is possibility that you want to hide some page elements if some conditions are met. These conditions can include:

* Successful load of the page.
* JavaScript files has successfully downloaded.
* JavaScript is enabled.
* Change in device orientation.

Whatever situation you might find yourself in, it's best to hide the page elements with accessibility in mind.

##__How to hide page elements__

Multiple options are available in your tool set as a developer when it comes to hiding page elements. __Some__ include:

* HTML `style` attribute.
* CSS `display` property.
* CSS `position` property.
* Hiding elements with JavaScript.

###__HTML `style` attribute__

When you use HTML `style` attribute to hide page elements you'll have to use it with some CSS properties. Most of the time that will be the `display` property with a value of `none`.

```html
<p style="display: none;">This text is not shown on screen</p>
```

You should know that when you hide page elements with the `display: none;` it is ignored by screen readers. e.g. [NVDA](https://www.nvaccess.org/).

###__CSS `display` property__

CSS `display` property with a value of `none` can be used in a number of ways depending on the condition. It can be used in the following cases:

* Hide a page element totally
* Changes in device orientation

####__Hide a page element totally__

The following selector will hide the page element totally and the Web browser will not render it on screen and a screen reader won't read it either.

```css
.selector {
    display: none;
}
```

Make sure that any element you hide totally is not critical to understanding your content nor decrease its accessibility.

Hiding the _search_ input on mobile is not really a good thing unless you have a mechanism to reveal it and the mechanism itself is accessible.

####__Changes in device orientation__

When you are designing with [_responsive web design_](https://dev.to/ziizium/introduction-to-responsive-web-design-45g6) approach you will find yourself hiding stuff on mobile and showing them on _tablet_ or _desktop_ view.

Take the following example.

```css
.left-side-bar {
    display: none;
}

/**
 * On tablet view upwards we show the
 * the left side bar
 */
@media screen and (min-width: 48em) {
    .left-side-bar {
        display: block;
    }
}
```

###__CSS `position` property__

The `position` property can be employed to position Web page elements just about where you want them on a Web page. It can also be used to move page element totally off-screen. I detailed how to do this in my post entitled: [How to implement accessibility "skip to content"](https://dev.to/ziizium/how-to-implement-accessibility-skip-to-content-4d8m).

The following will move the selected page element off-screen but __it is still available to screen readers.__

```css
.visually-hidden {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
```

###__Hiding elements with JavaScript__

Hiding page elements with JavaScript is two folds. They are:

* Directly applying inline styles.
* Adding a _class_ name that will hide the elements.

####__Directly applying inline styles__

Web page methods can be selected using a number DOM methods like `document.getElementByID()`, `document.querySelector()` e.t.c. After this you can apply styling that will hide the element directly to it.

Take a look the following example.

 ```js
let header = document.getElementById('header');

// hide the header 
header.style.display = "none";
```

You should know that the _header_ in the code above will only get hidden when the user has JavaScript enabled in their browser or their Web browser has successfully downloaded your JavaScript files.

####__Adding a _class_ name that will hide the elements__

You can create a _class_ in your CSS files that will exclusively for hiding page elements. Then, you can select a page element with JavaScript and add this _class_ to it.

The following CSS _class_ hides the element that it gets applied to:

```css
.hidden {
    display: none;
}
```

Then you can hide the desired page element by adding the `.hidden` class to its _class_ attribute.

```js
let footNote= document.getElementByID('foot-note');

// add the hidden class
footNote.classList.add('hidden');
```

Now that we've highlighted some ways to hide page elements there are some things you should avoid doing.

###__Things you should avoid doing__

__Do not hide element with CSS with the intention of showing it with JavaScript__. This is bad.

__Do not do this__:

```css
.left-side-bar {
    display: none;
}
```
Then showing it with JavaScript:

```js
let leftSideBar = document.querySelector('.left-side-bar');

// then show it
leftSideBar.style.display = "block";
```

If the user has JavaScript disabled or the JavaScript fails to download the user will lose access to the element.

If you need to do this make sure it's not a critical element of your page like an _archive_ sidebar that links to your previous blog post(s).

###__Real life example__

In the image below, I am using DEV _basic markdown_ editor but as you will notice you can see the _Publish_ and _Save draft_ button which are available in the _rich editor_.

![DEV basic markdown editor showing the Publish and save to draft button](https://dev-to-uploads.s3.amazonaws.com/i/6dv3pdt2hgod7xf01apo.png)

These buttons are later hidden when the JavaScript downloads. Had the DEV team hid the buttons with CSS so that it gets shown with JavaScript, these buttons will not be shown and you might see empty spaces.

##__Conclusion__

There are many options when it comes to hiding page elements, the choice is yours but remember to do it with accessibility in mind.

_Edit June 25, 2020: Add link to article about accessibility "skip to content"_.