jQuery show() and hide() example

by HYEONGJINKIM

HTML

<h1>jQuery show() and hide() example</h1>

<p>Hello, this show() and hide() example</p>

<button id="show">show()</button>
<button id="hide">hide()</button>
<button id="toggle">toggle()</button>
<button id="reset">Reset</button>

CSS

p {
  padding: 8px;
  margin: 16px;
  border: 1px solid blue;
  width: 250px;
  height: 50px;
  background-color: #999999;
  color: white;
}

JavaScript

// fast: 200ms, slow: 600ms

$("#show").click(function() {
  $("p").show('fast');
});

$("#hide").click(function() {
  $("p").hide('slow');
});

$("#toggle").click(function() {
  $("p").toggle();
});

$("#reset").click(function() {
  location.reload();
});