ensures that we always use the hidden attribute rather than "display:
none" or a mix of both. The reason being is that setting an element to
"display: none" will not allow it to be displayed by removing the hidden
attribute.

we have a css rule that applies "display: none" to elements that have
the 'hidden' attribute.

JQuery methods hide() and show() add and remove 'display: none'
respectively so we need to steer clear of these methods since they will
interfere with the behaviour of the 'hidden' attribute and the
associated CSS.