
#Jquery showhide how to#
When you first load a page in Chrome, an element without a style attribute will appear like this in the DOM inspector: element. I am sharing a simple jQuery example here that explains how to show, hide and animate HTML elements using jQuery and CSS.

The reason is that using display = 'block' is causing additional margin/whitespace next to the element being made visible in both IE (11) and Chrome (Version. Syntax: (selector).toggle (speed, easing, callback) Approach: Selector name for checkbox is same as the element which is used to display the content. The next step shows how to incorporate the show/hide effect. The toggle () method is used to check the visibility of selected elements to toggle between hide () and show () for the selected elements.

I would suggest this to hide elements (as others have suggested): document.getElementById(id).style.display = 'none' īut to make elements visible, I'd suggest this (instead of display = 'block'): document.getElementById(id).style.display = '' Now youve set up your jQuery script, styles, and images.
