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:
- Object is possibly null (document.getElementById) in TypeScript
- Get the value of an input element using TypeScript
- Check if an element contains a class using typescript
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js