Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript &amp; jQuery opdrachten</title>
<link href="_css/site.css" rel="stylesheet">
<link href="opdracht7A.css" rel="stylesheet">
<script src="_js/jquery-1.7.2.min.js"></script>
<script src="opdracht7A.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">KW1C<br>ICT-academie</i></p>
  </div>
  <div id="login">
    <p id="open">Login</p>
        <form>
	        <p>
		        <label for="username">Username:</label>
		        <input type="text" name="username" id="username">
	        </p>
	        <p>
		        <label for="password">Password: </label>
		        <input type="text" name="password" id="password">
	        </p>
	        <p>
		        <input type="submit" name="button" id="button" value="Submit" >
	        </p>
        </form>
    </div>
  <div class="content">
 <div class="main">
<h1>Animatie effect login scherm</h1>
<p>Opdracht: <br>Laat het login scherm naar beneden glijden op het moment dat je op het plus-teken klikt, en weer sluiten op het moment dat je op het min teken klikt. Na het verschijnen van het formulier veandert het plus-teken in een min-teken.</p>
<p>Stappen:</p>
<ol class="numbered">
	<li>Op welk html element moet ik een event listener gaan schrijven; wat wordt de selector ?</li>
	<li>Welk animatie functie heb ik nodig om het juiste effect te krijgen.</li>
	<li>De afbeelding _images/close.png en _images/open.png heb je nodig om de juiste buttons  te laten zien. Bekijk ook de classes die in deze pagina al zijn toegevoegd.</li>
</ol>
</div>
<div class="footer">
    <p>JavaScript &amp; jQuery, W. van Bijnen en A. Saebu, BOL 4 - opleiding tot Applicatie ontwikkelaar (2013).</p>
</div>
</div>
</div>
</body>
</html>


#login {
	width: 300px;
	position: absolute;
	left: 560px;
	top: 6px;
	z-index: 100;
}

#open {
	margin: 0;
	cursor: pointer;
	background: rgb(255,255,255)  url(_images/open.png) no-repeat 8px 7px;
	color: rgb(58,80,123);
	padding: 5px 0 2px 30px;
}

#login .close {
	background-image: url(_images/close.png);
	background-color: rgb(110,138,195);
}

#open:hover {
	color: rgb(0,0,0);
	background-color: rgb(110,138,195);
}

#login form {
	padding: 10px 10px 10px 10px;
	display: none;
	background-color: rgb(255,255,255);
}
#login label {
	display: inline-block;
	width: 100px;
	text-align:right;
	margin: 0 15px 0 0;
	color: rgb(58,80,123);
}
#login input {
	font-size: 14px;
}
#login #button {
	margin-left: 50px;
}
ol{
	list-style: decimal;
}


$(document).ready(function ()
{
    // Controleren of iemand op plusje drukt
    $('#open').on('click', function ()
    {
        $('#login form').slideToggle('fast');
        $( this ).toggleClass( "close" );
    }); // End click
});     // End ready