Untitled

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code</title>
<script src="../js/jquery.js"></script>
<script src="JSjQSurprise/script.js"> </script>
<style type="text/css">
.teaser
{
    width: 100%;
    background-color:red;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    height: 25px;
}

.surprise
{
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    background-color:red;
    font-size: 60px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 25px;
    left: 0;
    /*display: none;*/
}
</style>
<script>
    $( document ).ready(function() {
    $( ".surprise" ).hide();

    $( ".teaser" ).hover(function() {
    $( ".surprise" ).slideDown();
    });
    //als je klikt op .teaser dan moet de .surprise naar beneden scrollen/ verschijnen.

    $( ".surprise" ).click(function(){
        $( ".surprise" ).slideUp();
    });
    //als je klikt op .surprise dan moet de .surprise terug verdwijnen/ naar boven scrollen.
});
    </script>

</head>
<body >
<h1>jQuery</h1>
<p>
 1. wanneer de <em>muiscursor</em> over de rode "teaser" bovenaan komt, dan moet de surprise div naar beneden schuiven.
<br>2. <em>klik</em> je daarna op de surprise div, dan moet die surprise div opnieuw naar boven schuiven.
</p>
<hr>

<div class="surprise">Surprise!</div>
<div class="teaser">
    Mouse hover here!
</div>

</body>
</html>