coding180 icon
Coding180
Show and hide (display property) - Javascript

Show and hide (display property) - Javascript

Home > Tutorials > JavaScript > Common Interaction Methods


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>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel