How To Hide/Show An Element Using TypeScript

Hide/Show an Element using TypeScript

Let’s say you want to display content according to user actions. Check out the information in this post for the methods to hide/show an element using TypeScript.

Hide/show an element using TypeScript

We will show you two ways to hide/show an element using TypeScript. Let’s see what they are.

Use the display property

The first way we introduce is to use the ‘style.display’ property.

You can apply it by setting the value of the display property to :

  • ‘none’ if you want to hide the element
  • ‘block’ if you want to show the element

As an example, take a look at the following program:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./test.css">
  </head>
  <body>
    <div id="content">
        <h2>We are LearnShareIT</h2>
        <img src="https://learnshareit.com/wp-content/uploads/2022/10/LearnShareIt-Logo-E1-1-e1666069727307.png"/>
    </div>
  
    <button id="myButton" class="btn btn-primary"> Show content </button>
  
    <script src="./main.ts"></script>
  </body>
</html>

The TypeScript code section:

const myContent = document.getElementById('content');
const myBtn = document.getElementById('myButton');

if (myContent  != null && myBtn != null) {
    myBtn.addEventListener('click', function handleClick() {

    if (myContent .style.display === 'none') {
      myContent .style.display = 'block';  // Show the myContent element
      myBtn.textContent = 'Hide content';
      myBtn.className = 'btn btn-danger';
    } else {
      myContent.style.display = 'none';  // Hide the myContent element
      myBtn.textContent = 'Show content';
      myBtn.className = 'btn btn-primary';
    }

  });
}

Output:

Before accessing an element’s property, we must ensure it’s not a ‘null‘ element. The if statement is used to check the return value of the method document.getElementById. This method might return null if no element exists with the id we passed in.

Once you have access to the element you are looking for, a button is created to listen to the ‘click‘ event from the user. Every time the user presses the button, the display property’s value will be reset between the values ​​’none‘ and ‘display‘. 

As you have seen, when the value is ‘none’, the element will not be displayed, and vice versa.

Use the visibility property

Alternatively, you can use the ‘style.visibility‘ property. Its usage is quite similar to the ‘display‘ property.

You can apply it by setting the value of the visibility property to :

  • ‘hidden’ if you want to hide the element
  • ‘visible’ if you want to show the element

For instance, we use the same HTML structure as the first example. The TypeScript code will change to the following:

const myContent = document.getElementById('content');
const myBtn = document.getElementById('myButton');

if (myContent  != null && myBtn != null) {
  myBtn.addEventListener('click', function handleClick() {
    
    if (myContent .style.visibility === 'hidden') {
      myContent .style.visibility = 'visible';  // Show the myContent element
      myBtn.textContent = 'Hide content';
      myBtn.className = 'btn btn-danger';

    } else {
      myContent.style.visibility = 'hidden';  // Hide the myContent element
      myBtn.textContent = 'Show content';
      myBtn.className = 'btn btn-primary';

    }
  });
}

Output:

This snippet handles the same logic as the example when you work with the ‘display‘ property.

However, the element will be treated as non-existent when using ‘display’ with the value set to ‘none’. Conversely, when hiding an element by setting the value for ‘visibility’ to ‘hidden’, the element will still be considered existing and occupy the display space. This is also the difference between the properties ‘visibility’ and ‘display’.

Summary

In summary, We have shown you how to hide/show an element using TypeScript. Try to apply one of the methods above and see the results. Hopefully, the information we provided is helpful for you. Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *