Display:None vs. Visibility:Hidden
The CSS stylesheet embedded in this page demonstrates two methods to show and hide a DIV using JavaScript and CSS in your website design. It relies on the visibility property in the first DIV and the display property in the second. The difference is that when an HTML element has its CSS visibility property set to "hidden", the browser will still allocate space for the content on the webpage even though it's invisible. But when you set an element to "display:none", the browser does not allocate space on the page for its content. That's why the page needs to be re-drawn when you toggle it to 'display:block' here. This page relies on two JavaScript functions embedded in the head section of this page called "toggleDivVisibility" and "toggleDivDisplay". Just view the page source to see how it's all done.
Show/Hide DIV with JavaScript
Click Me! to toggle visibility:hidden DIV or Click Me! to toggle display:none DIV
Content above visibility:hidden DIV.
This DIV was initially set to visibility:hidden.
Now you can see it!
Content below visibility:hidden DIV.
Content above display:none DIV.
Content below display:none DIV.
The JavaScript functions used in the examples above are as follows:
function toggleDivVisibility(theDiv) {
(document.getElementById(theDiv).style.visibility == 'visible') ?
document.getElementById(theDiv).style.visibility = 'hidden' :
document.getElementById(theDiv).style.visibility = 'visible';
}
function toggleDivDisplay(theDiv) {
(document.getElementById(theDiv).style.display == 'block') ?
document.getElementById(theDiv).style.display = 'none' :
document.getElementById(theDiv).style.display = 'block';
}
But we can do something a bit more elegant than simply turning a switch on or off…
CSS Fade-in Show/Hide DIV
The conventional CSS show/hide techniques shown above act instantly and always struck me as a bit jarring. And when a question about this appeared in the WebDeveloper.com forum, I decided to create an example using CSS transitions. The forum message involved using a list of links that would selectably hide and reveal sections of a document. Try clicking on the menu items and see how it works.
Content Box 1
We start with some initial text visible to the user. Additional content is stacked invisibly within the document. Nothing special happens until the user takes the affirmative action of clicking on a menu item to reveal a different content section.
Content Box 2
Here is a selectable section of additional text that can be revealed when the user clicks on the link in the list on the left. User engagement is key to holding an audience and enticing further exploration of your website through creative design techniques.
Content Box 3
CSS transitions add drama and style through animated effects that provide more emotional impact and flair. The visibly changing content attracts the eye and attention of the user more than an instant change. As always, you want to keep such special effects limited to avoid having your style outweigh the substance of your website content.
The JavaScript required to perform the selection function is very similar to the conventional show/hide script shown above. The difference is that we're relying on the CSS "opacity" property instead of "visibility" or "display" and the content DIVs are all using position:absolute with an appropriate z-index so they're stacked on top of each other. In addition, the content boxes all have their "transition" property set so CSS3-compatible browsers will show the change in display gradually. Older browsers will simply see the change instantly.
var rdFadeBoxName = 'rdFadeBox';
var rdFadeBoxCurrent = 1;
function rdFadeBoxSelect(rdFadeBoxNum) {
if (rdFadeBoxNum != rdFadeBoxCurrent) { // Only process requests to reveal new content!
document.getElementById(rdFadeBoxName + String(rdFadeBoxCurrent)).style.opacity = '0';
rdFadeBoxCurrent = rdFadeBoxNum;
document.getElementById(rdFadeBoxName + String(rdFadeBoxCurrent)).style.opacity = '1';
} // endif (rdFadeBoxNum != rdFadeBoxCurrent)
} // end rdFadeBoxNext()
More CSS Tutorials
CSS Positioning
CSS Nested DIVs & Floats Tutorial
CSS Effects on Element Size
CSS Visibility Tutorial
CSS Centering Tutorial
CSS Vertical Align Tutorial
CSS Overflow Tutorial
Changing Stylesheets With JavaScript
When To Use Class or ID in CSS
Multiple Backgrounds in CSS3
How CSS Affects Element Size
Styling <table>s with CSS
All of the JavaScript and CSS is embedded in this document, so you can see all of the details. You'll also notice that I included "Next" and "Previous" functions so you could give users buttons to control the display instead of a menu-type list of selections. You could also change the functions to highlight the currect menu selection.
This page was last modified on October 01, 2020
