Hide Html Elements

Hide and Show HTML Elements using java script

An HTML website contains mainly text, images, and link controls. A common way of organizing all the controls is by placing the elements into a

control. With a

control, you can manipulate everything from the font to placement in an HTML page using CSS (cascading style sheets). Note that although the CSS code for manipulation is beyond the scope of this tutorial, we will be using CSS to state whether or not to display a div box.

We begin with an example of a

control. At this point, the code does nothing special.

o use visibility and display in javascript we are required to use the "style" attribute, this method represents the accessing CSS attributes in javascript.

style.visibility:
style.visibility will hide the element but will occupy the space allocated to the HTML element. To use style.visibility we need to pass either of two values "visible" or "hidden".

Showing HTML Element using JavaScript:

document.getElementById('html element id').style.visibility = "visible";

Hiding HTML Element using JavaScript:

document.getElementById('html element id').style.visibility = "hidden";

style.display:
style.display will hide the element and will not occupy the space. To use style.display we need to pass either of these values "inline" or "block" or "none"

Next, we will add javascript method to control the CSS attributes of our

control. As with all javascript, the script belongs in the head. The method is called toggleDiv and accepts no inputs. What the script is doing is checking if the

control is in a 'block' or 'none' state. Whichever state is found, we set the opposite.

Bellow i will write complete HTML example is listed below. To run this, simply copy the code and past the notepad into a file with an html extension.

in last coding part i will write complete HTML example To run this, simply copy the code and past the notepad and save into a file with an .html extension and run.

Reference: http://naveenkumarm.page.tl

Hide Html Elements

Comments

About dotnetspider.com

Quick Links

General

Services