[arborik]

Всем привет.
Столкнулся с такой проблемой.
При клике на ссылку, должна меняться высота шапки, при повторном клике, высота еще раз меняется.

ul.navigation, скрывается и показывается корректно. А вот высота .header-wrap при клике меняется на 207 пикселей, при повторном клике, высота остается 207 пикселей.

В чем моя ошибка?

Спасибо!

<div class="menu">												<!-- Menu -->
				<div class="login-menu">									<!-- Login Menu -->
					<ul id="sub-menu-login">								<!-- Login Sub Menu -->
						<li>
							<a href="#">Stas</a>
							<ul>
								<li><a href="#">My Profile</a></li>
								<li><a href="#">My</a></li>
								<li><a href="#">Help</a></li>
								<li><a href="#">Sign Out</a></li>
							</ul>
						</li>												<!-- Login Sub Menu END-->
					</ul>
				</div>
				<ul class="navigation">										<!-- Navigation-->
					<li>
						<a href="#">My Feed</a>
						<span>Videos shared <br> with me</span>
					</li>
					<li>
						<a href="#" class="active">Library</a>
						<span>My private uploaded <br> content</span>
					</li>
					<li>
						<a href="#">Shared</a>
						<span>My shared content</span>
					</li>
					<li>
						<a href="#">Groups</a>
						<span>Create and manage <br> sharing lists</span>
					</li>
				</ul>														<!-- Navigation END-->
			</div>
			<div class="collapse-nav"></div>

$(".collapse-nav").click(function(){
			$('ul.navigation').toggle(
				function () {
					$(".header-wrap").css("cssText", "height: 80px !important;");
				},
				function () {
					$(".header-wrap").css("cssText", "height: 207px !important;");
				}
			);
	});