Show HTML Element(s) using jQuery
Selected some HTML elements in the document that are hidden, show them using jQuery.
Solution
To show the selected hidden HTML elements using jQuery, call show() function on the selected elements.
For example, the syntax to show all hidden paragraphs in the document is
$("p").show();Programs
1. Show all hidden paragraphs in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("p").show();
}
</script>
</head>
<body>
<button onclick="myAction()">Show all paragraphs</button>
<p hidden>This is a paragraph.</p>
<p hidden>This is another paragraph.</p>
<p>This is some another paragraph.</p>
<br>
<a href="#">A dummy link</a>
</body>
</html>2. Show all hidden link elements in the document.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
function myAction() {
$("a").show();
}
</script>
</head>
<body>
<button onclick="myAction()">Show all links</button>
<p>Welcome to <a href="#jquery" hidden>jQuery</a></p>
<p>Welcome to <a href="#jquery">jQuery 3</a></p>
<p>This is some another paragraph.</p>
</body>
</html>