There are 2 different properties to hide element from User Interface. One is visibility Property and other is display property.
For example if we want to hide one element like button. Then using code “visibility:hidden” html page will hide the button from UI. But space occupied or size of the button will get consumed on front page. So tag is getting rendered but not data. So tag size is visible on page but not its content.
If user want to hide the complete tag and associated data from page then html/css provide property like “display:none”. By using display none property user can hide not only data but associated tag as well. This will have no impact on page layout.
Below are example which will give difference between visibility:hidden and display:none
Step 1) Displaying two buttons
<button type="button" >Button One</button>
<button type="button" >Button Two</button>Step 2) Now using visibility:hidden for first button.
<button type="button" style="visibility:hidden">Button One</button>
<button type="button" >Button Two</button>If you observe in above code button one is hidden but size is occupied on page layout.
Let’s use display:none property and see the effect.
<button type="button" style="display:none">Button One</button>
<button type="button" >Button Two</button>So in above example if you observe due to display:none property button one is completed hide and associated tag is not rendered on page. That’s why button two is completely left aligned.
Run time user can change property to hide the element by using below code in java script.
document.getElementById("button1").style.visibility = "visible";