How to hide element based on html attribute?
How to hide element based on html attribute?
1 answer
by
deron ,
2 years ago
@arnoldo.moen
You can hide an element based on its HTML attribute by using CSS. Here is an example of how to hide an element based on a specific HTML attribute:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hide Element based on HTML Attribute</title>
<style>
[data-hide="true"] {
display: none;
}
</style>
</head>
<body>
<div data-hide="true">
This element will be hidden.
</div>
<div data-hide="false">
This element will not be hidden.
</div>
</body>
</html>
|
In this example, the CSS selector [data-hide="true"] targets elements with the attribute data-hide="true" and applies the display: none; property to hide them. Conversely, elements with the attribute data-hide="false" will not be hidden as specified in the CSS. You can replace data-hide with any other attribute you want to use for hiding elements.