$(document).ready(function(){
$('#login a').toggle(function(){
$(this)
.addClass('active')
.next('from')
.animate({'height' : 'show'},{
duration: 'slow',
easing: 'easeOutBounce'
});
},function(){
$(this)
.removeClass('active')
.next('form')
.slideUp();
});
});
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>StarTrackr!</title>
<link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="login.css" type="text/css" media="screen" charset="utf-8"/>
<script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="../../lib/jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>StarTrackr!</h1>
<div id="login">
<a href="#">Log in</a>
<form action="">
<div>
<label for="username">Username:</label>
<input name="username" id="username" type="text"/>
</div>
<div>
<label for="password">Password:</label>
<input name="password" id="password" type="password"/>
</div>
<div>
<input type="submit" value="Log in!" />
</div>
</form>
</div>
</div>
<div id="content">
<h2>
Welcome!
</h2>
<ul>
<li><a href="#">What's new?</a></li>
<li><a href="#">Member extras</a></li>
<li><a href="#">About Us</a></li>
</ul>
<p>
Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!
</p>
<p id="disclaimer">
Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
</p>
<div id="news">
<h2>Latest News</h2>
<p>
Which member of the seminal calypso/lectro band <em>C&C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
<span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
</p>
<p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
</div>
<div id="celebs">
<h2 class="heading">Our Celebrities</h2>
<p class="info">
We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast!
</p>
<table class="data">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
<th>Approx. Location</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>203A</td>
<td>Johny Stardust (<a href="bio.pdf">bio</a>)</td>
<td>Front-man</td>
<td><a href="#" class="location" title="Check out all the Celebs in LA this week!">Los Angeles</a></td>
<td>$39.95</td>
</tr>
<tr>
<td>141B</td>
<td>Beau Dandy (<a href="img.jpg">pic</a>,<a href="bio.pdf">bio</a>)</td>
<td>Singer</td>
<td><a href="#" class="location" title="Check out all the Celebs in New York this week!">New York</a></td>
<td>$39.95</td>
</tr>
<tr>
<td>2031</td>
<td>Mo' Fat (<a href="img.jpg">pic</a>)</td>
<td>Producer</td>
<td><a href="#" class="location" title="Check out all the Celebs in New York this week!">New York</a></td>
<td>$19.95</td>
</tr>
<tr>
<td>007F</td>
<td>Kellie Kelly (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>
<td>Singer</td>
<td><a href="#" class="location" title="Check out all the Celebs in Omaha this week!">Omaha</a></td>
<td>$11.95</td>
</tr>
<tr>
<td>8A05</td>
<td>Darth Fader (<a href="img.jpg">pic</a>)</td>
<td>DJ</td>
<td><a href="#" class="location" title="Check out all the Celebs in London this week!">London</a></td>
<td>$19.95</td>
</tr>
<tr>
<td>6636</td>
<td>Glendatronix (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>
<td>Keytarist</td>
<td><a href="#" class="location" title="Check out all the Celebs in London this week!">London</a></td>
<td>$39.95</td>
</tr>
</tbody>
</table>
</div>
<div id="comment">
<h2>Leave a comment</h2>
name:<br />
<input type="text" /><br/>
comment:<br/>
<textarea rows="5" cols="30"></textarea>
</div>
<h2>Fine Print</h2>
<p id="fine_print">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="footer">
<p>
© Copyright 2010 CelebriTracker Productions
</p>
</div>
</div>
</body>
</html>
#container {
position: relative;
}
#login {
position: absolute;
top: 0;
right: 10px;
background: #94C5EB;
padding: 5px;
-moz-border-radius: 4px;
width: 155px;
}
#login form {
margin-top: 10px;
}
#login form label, #login form input {
display: block;
}
#login form button {
float: right;
margin-top: 10px;
}
#login a {
display: block;
text-decoration: none;
font-size: 130%;
font-weight: bold;
height: 20px;
padding: 0 20px 0 5px;
background: url(links.png);
background-position: right -20px;
background-repeat: no-repeat;
}
#login a.active {
background-position: right 0;
}