From my understanding using .hide in jquery uses (css) {visibility:hidden;} is there an alternative using {display:none;} ?
As doesn’t a {visibility:hidden;} item still take up pixel space, where as with {display:none;} it hides the item and does not take up any space on screen
Nope, jQuery.hide() sets the display to none, here is proof FIDDLE