jQuery Hide/Show

The hide() and show() methods are used to hide and show elements, respectively.
hide() method is used to hide the selected elements.
show() method is used to show the selected elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Hide/Show Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: blue;
    }
  </style>
</head>
<body>

  <button id="hideBtn">Hide Paragraph</button>
  <button id="showBtn">Show Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Hide paragraph on button click
      $("#hideBtn").click(function(){
        $("#myParagraph").hide();
      });

      // Show paragraph on button click
      $("#showBtn").click(function(){
        $("#myParagraph").show();
      });
    });
  </script>

</body>
</html>

jQuery Toggle()

Used to toggle between hide and show for the selected element.
Syntax $("p").toggle();

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Toggle Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    p {
      font-size: 18px;
      color: green;
    }
  </style>
</head>
<body>

  <button id="toggleBtn">Toggle Paragraph</button>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    $(document).ready(function(){
      // Toggle paragraph on button click
      $("#toggleBtn").click(function(){
        $("#myParagraph").toggle();
      });
    });
  </script>

</body>
</html>

Quick Recap - Topics Covered

jQuery Hide/Show
jQuery Toggle

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message