I've managed to animate the menu to open, but now I wanted to close an open button if I click on another. I supoose it's a simple "if" "else" statement, but I've tried over and over again and can't seem to get it to work as I wish.

Here goes the code as I have it:

HTML

2. <nav>
3.                 <ul>
4.                     <li> <a href="#"><img src="images/header_icon_home.gif" width="45" height="45" alt="home"></a>
5.                       <span>home</span></li>
6.                     <li> <a href="#"><img src="images/header_icon_portfolio.gif" width="45" height="45" alt="porfolio"></a>
7.                       <span>portfolio</span></li>
8.                     <li> <a href="#"><img src="images/header_icon_blog.gif" width="45" height="45" alt="blog"></a>
9.                       <span>blog</span></li>
10.                     <li> <a href="#"><img src="images/header_icon_about.gif" width="45" height="45" alt="about"></a>
11.                       <span>about</span></li>
12.                     <li> <a href="#"><img src="images/header_icon_contact.gif" width="45" height="45" alt="contact"></a>
13.                       <span>contact</span></li>
14.                     <li> <a href="#"><img src="images/header_icon_search.gif" width="45" height="45" alt="search"></a>
15.                   <span class="search"><input name="search" id="search" ></input></span></li>
16.                 </ul>
17.             </nav>

CSS:

2. nav ul {
3. position:absolute;
4. right:0;
5. top: 42px;
6. }
7. nav ul li {
8. display: inline-block;
9. float:left;
10. }
11. nav ul li img {
12. float:left;
13. }
14. nav ul li span {
15. background-color: #333;
16. color: #fff;
17. padding: 13px 5px;
18. float:left;
19. font-size:16px;
20. display:none;
21. }
22. nav ul li span.search {
23. padding: 12px 10px 12px 5px;
24. background-color: #666;
25. }
26. nav ul li span input {
27. font-size:12px;
28. }

Jquery function

2. $('nav ul li a').click(function() {
3. $(this).next().animate({width: 'toggle'}, 200);
4.  });