​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
  #slideMe {
6
    background: gold;
7
    padding: 20px;
8
    display: none; /* Hide the element */
9
  }
10
</style>
11
​
12
<!-- Load jQuery -->
13
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
14
​
15
<!-- Use jQuery -->
16
<script>
17
// Wait for DOM to load and be ready
18
$(document).ready(function(){
19
  
20
  // Click event handler
21
  $("button").click(function() {
22
  
23
    // Slide down the element
24
    $( "#slideMe" ).slideDown();
25
    
26
  });
27
  
28
});
29
</script>
30
<button>Slide it!</button>
31
<p id="slideMe">Surprise!</p>