Show/hide 'div' using JavaScript
Solution 1
How to show or hide an element:
In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display
property:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility
property instead:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Hiding a collection of elements:
If you want to hide a collection of elements, just iterate over each element and change the element's display
to none
:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
Showing a collection of elements:
Most of the time, you will probably just be toggling between display: none
and display: block
, which means that the following may be sufficient when showing a collection of elements.
You can optionally specify the desired display
as the second argument if you don't want it to default to block
.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
Alternatively, a better approach for showing the element(s) would be to merely remove the inline display
styling in order to revert it back to its initial state. Then check the computed display
style of the element in order to determine whether it is being hidden by a cascaded rule. If so, then show the element.
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(If you want to take it a step further, you could even mimic what jQuery does and determine the element's default browser styling by appending the element to a blank iframe
(without a conflicting stylesheet) and then retrieve the computed styling. In doing so, you will know the true initial display
property value of the element and you won't have to hardcode a value in order to get the desired results.)
Toggling the display:
Similarly, if you would like to toggle the display
of an element or collection of elements, you could simply iterate over each element and determine whether it is visible by checking the computed value of the display
property. If it's visible, set the display
to none
, otherwise remove the inline display
styling, and if it's still hidden, set the display
to the specified value or the hardcoded default, block
.
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>
Solution 2
You can also use the jQuery JavaScript framework:
To Hide Div Block
$(".divIDClass").hide();
To show Div Block
$(".divIDClass").show();
Solution 3
You can simply manipulate the style of the div in question...
document.getElementById('target').style.display = 'none';
Solution 4
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition) {
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
<div id="attid" style="display:none;">Show/Hide this text</div>
Solution 5
Using style:
<style type="text/css">
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
Using an event handler in JavaScript is better than the onclick=""
attribute in HTML:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript:
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
jQuery may help you to manipulate DOM elements easy!
Related videos on Youtube
Jake Ols
Updated on July 08, 2022Comments
-
Jake Ols almost 2 years
For a website I'm doing, I want to load one div, and hide another, then have two buttons that will toggle views between the div using JavaScript.
This is my current code
function replaceContentInContainer(target, source) { document.getElementById(target).innerHTML = document.getElementById(source).innerHTML; } function replaceContentInOtherContainer(replace_target, source) { document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML; }
<html> <button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button> <button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button> <div> <span id="target">div1</span> </div> <div style="display:none"> <span id="replace_target">div2</span> </div>
The second function that replaces div2 is not working, but the first one is.
-
doppelgunner over 3 yearsIf you want to know more about the DOM and how to manipulate elements using javascript and it's jquery version, read the article here: noobieprogrammer.blogspot.com/2020/09/…
-
-
Jake Ols over 10 yearsBut I would like it to display the content of the second div as well
-
John - Not A Number over 9 yearsUsing Hidden for a problem like this is probably not a good idea - as well as being unsupported in IE versions before 11, the poster is effectively trying to do something equivalent to a simple tab interface, and so the elements won't be hidden in all contexts. In this sort of situation, it's probably better to use 'display' to control the hiding - see stackoverflow.com/questions/6708247/…
-
MLeFevre over 9 yearsThe question doesn't mention using jQuery
-
Kinjal Dixit over 9 yearswhich is not a reason for downvoting. the question doesn't specifically say to not use jquery, and besides other people coming here to view the answers may not have the same constraints as the OP.
-
MLeFevre over 9 years@KinjalDixit If IMRUP wants to add a note that his answer doesn't use vanilla JS and instead relies on jQuery, then it would have some merit, even though the original question isn't tagged for jQuery/even mentions jQuery. As it currently stands it's an answer using a library without mentioning that it does so, little (albeit probably all that's necessary) explanation, and confusing use of a selector (using class selector whilst stating ID?). As it currently stands, I do not think it is useful answer to this question.
-
Mark Cooper almost 9 yearsWhen adding a jQuery example (which is perfectly valid approach IMHO) please also provide a vanilla JS example for comparison and explain to the OP the difference. So many new developers these days think jQuery is JavaScript. A little eduction would help them make the right choices.
-
bobobobo about 7 yearsYou can try the
hidden
attribute of HTML5 -
Vishwa over 6 yearsif you want to use class name instead of Id, use like document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';
-
mfnx over 5 yearsI think this answer was very useful, and related to the question.
-
Chris almost 3 yearseres la piola. Gracias
-
JonV over 2 yearsThe 'to hide' & 'to display' comments need to be switched.