Drop down login box

[Krave]

Hi, I'm currently trying to create a drop down login box (example) for my community. The issue is s that I have no idea how to use jQuery. I've google'd how to create one but and this is what I have.

Google resource I've used: http://red-team-design.com/simple-and-ef...login-box/

In the header_welcomeblock_guest:

<div id="panel">
	<ul>
		<li><a id="login-trigger" href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">Login</a></li>
		<li><a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a></li>
	</ul>
</div>
<div id="login-content">
	<form>
		<fieldset id="inputs">
			<input id="username" type="email" name="Email" placeholder="Your email address" required>   
			<input id="password" type="password" name="Password" placeholder="Password" required>
		</fieldset>
		<fieldset id="actions">
		<input type="submit" id="submit" value="Log in">
				<label><input type="checkbox" checked="checked"> Keep me signed in</label>
          	</fieldset>
	</form>
</div>   

and in the headerinclude:

$(document).ready(function(){
  $('#login-trigger').click(function(){
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');          
    
    if ($(this).hasClass('active')) $(this).find('span').html('▲')
      else $(this).find('span').html('▼')
    })
});

When ever I click on 'login' (example) nothing happens. If anyone can help me out, that would be much appreciated!

---

Please close, I have the issue sorted.