jQuery slideUp(), slideDown() and slideToggle() example

by HYEONGJINKIM

HTML

<div class="clear">
  <h3>slideDown() example</h3>

  <div class="slideDownbox">
    Click me - slideDown()
  </div>

  <div class="slideDownbox">
    Click me - slideDown()
  </div>
</div>
<div class="clear">
  <h3>slideUp() example</h3>

  <div class="slideUpbox">
    Click me - slideUp()
  </div>

  <div class="slideUpbox">
    Click me - slideUp()
  </div>
</div>
<div class="clear">
  <h3>slideToggle() example</h3>
  <button id="slideToggle">slideToggle()</button>
  <br>
  <div class="slideTogglebox">
    slideToggle()
  </div>

  <div class="slideTogglebox">
    slideToggle()
  </div>

</div>

CSS

.slideDownbox,
.slideUpbox,
.slideTogglebox {
  float: left;
  padding: 8px;
  margin: 16px;
  border: 1px solid red;
  width: 200px;
  height: 50px;
  background-color: #000000;
  color: white;
}

.clear {
  clear: both;
}

JavaScript

$(".slideDownbox").click(function() {
  $(this).hide().slideDown('slow');
});

$(".slideUpbox").click(function() {
  $(this).slideUp(1000);
});

$("#slideToggle").click(function() {
  $('.slideTogglebox').slideToggle();
});

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