I have this code, and I would like to toggle the click but it is not working. Any tips sff?
HTML:
<body>
<img id="topBar" src="imgs/topBar.png">
<div id ="wrapper">
<nav>
<a href="index.php"><img id="logo" src="imgs/logo.jpg"></a>
<a href="index.php"><img id="logoMob" src="imgs/logo.jpg"></a>
<div id ="btMob"><h1>MENU</h1></div>
<ul>
<li><a href="Linguas.php">Línguas</a></li>
<li><a href="Cursos.php">Cursos</a></li>
<li><a href="Learning_Portuguese.php">Learning Portuguese</a></li>
<li><a href="Testemunhos.php">Testemunhos</a></li>
<li><a href="Sobre_nos.php">Sobre nós</a></li>
<li><a href="FAQ.php">FAQ</a></li>
<li id ="cont"><a>contactos</a><img src="imgs/arrow.png"></li>
</ul>
</nav>
CSS:
#logo {
height: 100%;
float: left;
width: auto;
border-left: 1500px solid #fff;
margin-left: -1500px;
}
#logoMob {
height: 100%;
float: left;
width: auto;
margin: 0;
display: none;
}
#btMob {
width: 200px;
cursor: pointer;
height: 100%;
margin: 0 0 0 63px;
background-color: #fff;
text-align: center;
display: none;
position: absolute;
}
@media only screen and (max-width: 900px) {
#logo {
display: none;
}
#logoMob {
display: inline;
}
#btMob {
display: block;
}
}
jQuery:
$('#logoMob, #btMob').click(function() {
$('nav ul').stop(true).animate({
left:"328px"
}, 300, 'linear');
}, function() {
$('nav ul').stop(true).animate({
left:"0"
}, 300, 'linear');
});