Hiding a DIV in HTML with or without Javascript

Sometimes we need to hide a DIV in a HTML page. There are various ways to do that. Some of them includes usage of Javascript, while some of them don't. However if you learn the usage of Javascript then you can control it more easily. Without wasting the time let me show you the methods.


There are three ways to hide a DIV in a HTML document. The way to use these ways is explained with syntax in both HTML and Javascript. A person who have got basic knowledge of these languages can easily understand that.

Opacity: Opacity is a term more used by photoshop experts. But here we will use it a style for div.
 HTML :  <div id="div1" style="opacity:0.5;">Anything here</div>
Javascript : document.getElementById('div1').style.opacity=0.5;In the above statement opacity controls the visibility of the content of div. If you set opacity to 0.0 then it becomes completely invisible and shows everything behind it, while setting opacity to 1.0 makes it completely visible and hides every thing behind it. Any number between 0.0 to 1.0 will give a translucent effect.

Visibility: As the term suggests, visibility is again a style feature which can be used in the following manner.
HTML : <div id="div1" style="visibility:hidden;">Anything here</div>
Javascript: document.getElementById('div1').style.visibility='hidden';
The negative fact about "visibility" is that it keeps the space reserved for div, but just doesn't show it. So it might show a blank space in document. Visibility has got two options, one is hidden, while second is visible (to show that div again).

Display: This one is the one that i use a lot. It can totally remove the div from a HTML document and it does not leave any space reserved for that div.
HTML : <div id="div1" style="display:none;">Anything here</div>
Javascript: document.getElementById('div1').style.display='none';
As you can see "none" removes the div totally from sight and does not leave any space for that. There are two more options to make the div visible. "block" is used for block elements like <div> and <p>, while "inline" is used for inline elements like <span> and <a>.

I hope that the above coding features of HTML and Javascript will help some of you. If you have any query then feel free to comment.
Share this Article :
Email

No comments:

Post a Comment