You might want to read this about the difference between visibility and display:
Could you expand on why you thought display should be used instead of visibility?
To summarise the differences as I understand them:-
• The display property determines whether the element is rendered
and all of the inherited elements. i.e. turn it off if you want to "vanish" an element
and break the layout, which the OP didn't ask to do (merely "hide").
• The visibility property determines whether it's seen
without affecting the layout, or any inherited elements.
•
https://developer.mozilla.org/en-US/docs/Web/CSS/display
•
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
An example of when the use of the visibility rule would be appropriate (IMO) is
https://forum.dokuwiki.org/post/49146 (though it's an inelegant solution)
No offence intended, but please don't promote
that site. They are not in
anyway associated with or endorsed by the W3C, the accuracy of their "tutorials" is unreliable, I don't support the methods they employ to promote their business, and there are many better resources. (comments moderated to avoid their usual reaction).
The authoritative guide is the real W3C
http://www.webplatform.org/,
http://www.w3devcampus.com/, and
http://www.w3.org/Style/CSS/. Mozilla Developer Docs is also very good. Neither are diploma mills creating scores of unemployable web designers. Other good resources (IMO):
http://css-tricks.com/ and
http://www.html5rocks.com/en/
Kind regards