How to hide and show html element using jQuery?

by jaleel_vonrueden , in category: JavaScript , 2 years ago

How to hide and show html element using jQuery?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by dmitrypro77 , 2 years ago

@jaleel_vonrueden Use hide() and show() methods in jQuery to hide and show html elements, code as example:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
  <title>How to hide and show html element using jQuery?</title>
  <meta charset="utf-8"/>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<p class="text">Test string</p>
<button id="show">Show Text Element</button>
<button id="hide">Hide Text Element</button>
</body>
<script>
  // Show html element
  $("#show").on("click", () => {
    $(".text").show();
  })

  // Hide html element
  $("#hide").on("click", () => {
    $(".text").hide();
  })
</script>
</html>


Member

by woodrow , a year ago

@jaleel_vonrueden 

To hide an HTML element using jQuery, you can use the .hide() method. The syntax of the .hide() method is:

1
$(selector).hide(speed, callback);


  • selector: This specifies the element(s) to be hidden.
  • speed: This is optional and specifies the speed of the animation. It can be a string (e.g. "slow", "fast") or a number in milliseconds.
  • callback: This is optional and specifies a function to be called after the animation is complete.


For example, to hide a div with an id of "myDiv":

1
$("#myDiv").hide();


To show the hidden element, you can use the .show() method. The syntax of the .show() method is:

1
$(selector).show(speed, callback);


  • selector: This specifies the element(s) to be shown.
  • speed: This is optional and specifies the speed of the animation. It can be a string (e.g. "slow", "fast") or a number in milliseconds.
  • callback: This is optional and specifies a function to be called after the animation is complete.


For example, to show the hidden div with an id of "myDiv":

1
$("#myDiv").show();


You can also use the .toggle() method to switch between hiding and showing an element. The syntax of the .toggle() method is:

1
$(selector).toggle(speed, callback);


  • selector: This specifies the element(s) to be toggled.
  • speed: This is optional and specifies the speed of the animation. It can be a string (e.g. "slow", "fast") or a number in milliseconds.
  • callback: This is optional and specifies a function to be called after the animation is complete.


For example, to toggle the visibility of the div with an id of "myDiv":

1
$("#myDiv").toggle();


This would initially hide the div if it is visible, and show it if it is hidden.