Home HTML Tutorial for beginners 17 Example to explain use of some attribute

17 Example to explain use of some attribute

10
0

In this example we will learn the use of hidden attribute as well as id attribute.

<!doctype HTML>
<head>
</head>
<body>
<p onClick="document.getElementById('head1Content').style.display = 'block'" title="Click here to show the Heading.">Show Heading</p>
<p onClick="document.getElementById('head2Content').style.display = 'block'" title ="Click here to show another Heading">Show Another Heading</p>
<p onClick="document.getElementById('head1Content').style.display = 'none'" title="Click here to hide the Heading.">Hide Heading</p>
<p onClick="document.getElementById('head2Content').style.display = 'none'" title ="Click here to hide another Heading">Hiding Another Heading</p>
<h1 id="head1Content" hidden>This is a heading</h1>
<h1 id="head2Content" hidden>This is another heading</h1>
<script>

</script>
</body>
</html>

Explanation:

When we first run the program we cannot see the h1 elements because both are hidden.

When we click on show heading paragraph element, it triggers on click event and the java script code written with in double quotes executes. The java script code getElementById finds for the element that has head1content as id and applies the style display=block to it. So as a result of this, the element whose id is head1content is displayed.

When we click on hide heading paragraph element, it triggers on click event and the java script code written with in double quotes executes. The java script code getElementById finds for the element that has head1content as id and applies the style display=none to it. So as a result of this, the element whose id is head1content is hidden.

When we hover over an element the value of title attribute displays as a tooltip.

like onClick event we will discuss in short some more events in our next lesson.

LEAVE A REPLY

Please enter your comment!
Please enter your name here