The display property sets or returns the element’s display type.
Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.
The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
Tip: If an element is a block element, its display type can also be changed with the float property.
Browser Support
Syntax
Return the display property:
Property Values
Value
Description
block
Element is rendered as a block-level element
compact
Element is rendered as a block-level or inline element. Depends on context
flex
Element is rendered as a block-level flex box. New in CSS3
inline
Element is rendered as an inline element. This is default
inline-block
Element is rendered as a block box inside an inline box
inline-flex
Element is rendered as a inline-level flex box. New in CSS3
inline-table
Element is rendered as an inline table (like
), with no line break before or after the table
list-item
Element is rendered as a list
marker
This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline»)
none
Element will not be displayed
run-in
Element is rendered as block-level or inline element. Depends on context
table
Element is rendered as a block table (like
), with a line break before and after the table
table-caption
Element is rendered as a table caption (like )
table-cell
Element is rendered as a table cell (like
and
)
table-column
Element is rendered as a column of cells (like )
table-column-group
Element is rendered as a group of one or more columns (like )
table-footer-group
Element is rendered as a table footer row (like )
table-header-group
Element is rendered as a table header row (like )
table-row
Element is rendered as a table row (like
)
table-row-group
Element is rendered as a group of one or more rows (like )
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
Technical Details
Default Value:
inline
Return Value:
A String, representing the display type of an element
CSS Version
CSS1
More Examples
Example
Difference between the display property and the visibility property:
function demoDisplay() < document.getElementById(«myP1»).style.display = «none»; >
function demoVisibility() document.getElementById(«myP2»).style.visibility = «hidden»; >
Example
Toggle between hiding and showing an element:
function myFunction() < var x = document.getElementById(‘myDIV’); if (x.style.display === ‘none’) < x.style.display = ‘block’; > else < x.style.display = ‘none’; > >
Example
Difference between «inline», «block» and «none»:
function myFunction(x) < var whichSelected = x.selectedIndex; var sel = x.options[whichSelected].text; var elem = document.getElementById(«mySpan»); elem.style.display = sel; >
How to hide and show DOM elements using JavaScript
There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.
The style display property is used to set and get the element’s display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides. To hide an element, set the display property to none :
Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none , it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size. To hide an element, set the visibility property to hidden :
The style visibility property only hides the element but doesn’t remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.
jQuery provides hide() , show() , and toggle() utility methods that use inline styles to update the display property of the element. Let us use the style property to create the above jQuery methods in vanilla JavaScript:
// hide an elementconsthide=elem=> elem.style.display ='none'>// show an elementconstshow=elem=> elem.style.display ='block'>// toggle the element visibilityconsttoggle=elem=>// if the element is visible, hide itif(window.getComputedStyle(elem).display !=='none')hide(elem)return>// show the elementshow(elem)>
// hide elementhide(document.querySelector('.btn'))// show elementshow(document.querySelector('.btn'))// toggle visibilitytoggle(document.querySelector('.btn'))
Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible. We used this method because the style property only deals with inline styles specified using the element’s style attribute. But the HTML element could be hidden through an embedded element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined. Another thing to notice is the getComputedStyle(elem).display !== ‘none’ statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex , inline-block , grid , table , etc., for the display property to show an element. However, to hide an element, there is only one value, display: none . If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
JavaScript — How to show and hide div by a button click
To display or hide a by a click, you can add the onclick event listener to the element.
The onclick listener for the button will have a function that will change the display attribute of the from the default value (which is block ) to none .
For example, suppose you have an HTML element as follows:
The element above is created to hide or show the element on click.
You need to add the onclick event listener to the element like this:
When you click the element again, the display attribute will be set back to block , so the will be rendered back in the HTML page.
Since this solution is using JavaScript API native to the browser, you don’t need to install any JavaScript libraries like jQuery.
You can add the JavaScript code to your HTML tag using the tag as follows:
Feel free to use and modify the code above in your project.
I hope this tutorial has been useful for you. 👍
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.
About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials. Learn statistics, JavaScript and other programming languages using clear examples written for people.
We can use JavaScript to show and hide a div using one button by combing the getElementById() method, the display property, and an if else conditional statement.
var displayStatus = document.getElementById("someDiv"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else
We can use JavaScript to show a div and hide a div, but to be able to toggle between the two, we can do so using the code above.
Let’s say we have the following html:
If we want to use JavaScript to show hide the div, we can do so by targeting the element’s display property. We do this simply by getting the id of the div and then changing its display property to “block” if it is hidden, or “none” if it is shown. We check this with an if-else conditional statement.
var displayStatus = document.getElementById("div1"); if ( displayStatus.style.display == 'none' ) < displayStatus.style.display = 'block'; >else
Note that we can also show/hide (or toggle) a div easily using jQuery with the toggle() method.
Using JavaScript to Show/Hide a Div With a Click
We can use JavaScript to show/hide a div very easily by combining the display property and an if-else conditional statement with an onclick event.
Let’s say that we have the following HTML where we want to give the user the ability to show and hide the div #div1. The div will just be a greenish box that will be shown to start.
In the JavaScript code, we will add an onclick event to a button that will run a function we will create. In the function, we will simply change the display property of the div to “block” if it is hidden, or “none” if it is shown.
Here is the JavaScript code:
The final code and output for this example of using JavaScript to show/hide a div with a click is below:
