Display and hide effects are often seen in web pages, which can be set through the display attribute.
Syntax:
Object.style.display = value
Note: Object is the obtained element properties and method.
Display value Table:
| Name | Description |
|---|---|
| None | Hides the HTML element |
| Block | Make HTML element visible |
Take a look at the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display - coding180.com</title>
<script type="text/javascript">
function hidetext() {
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext() {
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript hide/show </h1>
<p id="con">I am a paragraph, i can hide and display myself based
on button click below! </p>
<form>
<input type="button" onclick="hidetext()" value="hide content" />
<input type="button" onclick="showtext()" value="display content" />
</form>
</body>
</html>
Task - Exercise - 16
Let's implement the hiding and display of the p tag element with id="content":
1. Edit the code on line 13, and hide it using style.display.
2. Edit the code on line 18, and make it visible using style.display.
Task Code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js display - coding180.com</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("content");
}
function showtext()
{
var mychar = document.getElementById("content");
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">As a web developer, JavaScript is an essential tool
if you want to provide beautiful web pages and satisfy users with
an online experience. </p>
<form>
<input type="button" onclick="hidetext()" value="hide content" />
<input type="button" onclick="showtext()" value="display content" />
</form>
</body>
</html>
