[Edit]

jQuery - hide and show element

1 contributors

2 contributions

0 discussions

1 points

Created by:

Eshaal-Wilkinson

774

In this article, we would like to show you how to hide and show elements using jQuery.

1. `hide` and `show` methods example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="text">This is example text...</div>
  <button id="hide-text">Hide text</button>
  <button id="show-text">Show text</button>
  <script>
​
    $(document).ready(function() {
        var text = $('#text');
​
        $('#hide-text').click(function() {
            text.hide();
        });
​
        $('#show-text').click(function() {
            text.show();
        });
    });
​
  </script>
</body>
</html>

Auto running

2. Animated hiding and showing example

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="text">This is example text...</div>
  <button id="hide-text">Hide text</button>
  <button id="show-text">Show text</button>
  <script>
​
    var duration = 1000; // animation duration in milliseconds
​
    $(document).ready(function() {
        var text = $('#text');
​
        $('#hide-text').click(function() {
            text.hide(duration);
        });
​
        $('#show-text').click(function() {
            text.show(duration);
        });
    });
​
  </script>
</body>
</html>