Hi All

I have a jsfiddle here - http://jsfiddle.net/eYV4n/

Really simple navigation and a hidden div block beneath it.

When you click the second link in the nav the div block slides down with slideToggle.

When the div block slides down I would like the button clicked to be selected.

I can do this when it's clicked by changing the background color.

Is it possible to deselect the link (change it's color back) when the div block slides again.

jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.

Code:
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="robots" content="">
  <title>Title of the document</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  

  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    body{
      background:#eee;
    }
    #wrap{
      background:#fff;
      max-width:800px;
      margin:0 auto;
      height:1000px;
    }
    ul{
      list-style:none;
      overflow:auto;
    }
    ul li{
      display:inline;
    }
    ul li a {
      float:left;
      display:block;
      color:#222;
      padding:10px;
      margin:0 5px 0 0;
    }
    #block{
      width:100%;
      margin:0 auto;
      height:200px;
      background:red;
      display:none;
    }
  </style>

  </head>

<body>
  <div id="wrap">
    <nav>
      <ul>
        <li><a href="">One</a></li>
        <li><a href="" id="btn">Two &darr;</a></li>
        <li><a href="">Three</a></li>
        <li><a href="">Four</a></li>
      </ul>
    </nav>  

  <div id="block">

  </div>

  </div><!-- #wrap -->


  <script>

    $('#btn').click(function(e){
      e.preventDefault();
      $('#block').slideToggle('2000')
        $('#btn').css('background','red');
    })


  </script>
</body>

</html>