Здравствуйте. Не работает toggle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/js/jquery-1.12.1.js"></script>
<link rel="stylesheet" href="/css/style.css">
<script>
$(document).ready(function(){
$('.top-auth').toggle(
function(){
$(".top-auth").attr("id", "active-button");
$("#block-top-auth").fadeIn(2000);
},
function(){
$(".top-auth").attr("id", "");
$("#block-top-auth").fadeOut(2000);
}
);
});
</script>
</head>
<body>
<p id="reg-auth-title" align="right">
<a class="top-auth">Вход</a> <a href="registration.php">Регистрация</a>
</p>
<div id="block-top-auth">
<div class="corner"></div>
<form method="post">
<ul id="input-email-pass">
<h3>Вход</h3>
<p id="message-auth">Неправильный логин и(или) пароль</p>
<li>
<center>
<input type="text" id="auth_login" placeholder="Логин или E-mail">
</center>
</li>
<li>
<center>
<input type="text" id="auth_pass" placeholder="Пароль"><span id="button-pass-show-hide" class="pass-show"></span></center>
</li>
<ul id="list-auth">
<li>
<input type="checkbox" name="rememberme" id="rememberme">
<label for="rememberme">Запомнить меня</label>
</li>
<li><a href="#" id="remindpass">Забыли пароль</a></li>
</ul>
<p align="right" id="button-auth"><a>Войти</a></p>
<p align="right" class="auth-loading"><img src="/images/loading.gif" alt=""></p>
</ul>
</form>
</div>
</body>
</html>
По нажатию на кнопку с class=top-auth должен выдвигаться блок div c id=block-top-auth.
На самом же деле, кнопка вообще исчезает при загрузке страницы.
В CSS не предусматривается исчезновение кнопки(на данном этапе разработки). Вышеуказанный код, фрагмент касающийся этого вопроса.
Заранее благодарю за помощь.
