title: Toggle with hover/click with list items
body: <p>I'm trying to accomplish something that has a few different elements, each of which I can get to work individually, but when I try to combine them, I get nothing.</p>
  
  <p>The goals: 
  1) upon hover of list item text, toggle/fade description div.<br>
  2) upon click of list item text, "pin" description div<br>
  3) upon click of same list item, "unpin" description div<br>
  4) upon click of different list item, "unpin" whatever is already pinned so that it fades out, and "pin" the new item so that it sticks.  </p>
  
  <p>I have a list set up like this:  </p>
  
  <pre><code> &lt;ul&gt;  
    &lt;li&gt;&lt;a href="http://foo.com"&gt;foo&lt;/a&gt;  
    &lt;div class="description"&gt;some text to be revealed&lt;/div&gt;  
    &lt;/li&gt;  
    &lt;li&gt;&lt;a href="http://foo.com"&gt;foo&lt;/a&gt;  
    &lt;div class="description"&gt;some text to be revealed&lt;/div&gt;    
    &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the jquery I have so far:</p>
  
  <pre><code>$(function() {  
  //creates toggle fade effect
  jQuery.fn.fadeToggle = function(speed, easing, callback) {   
    return this.animate({opacity: 'toggle'}, speed, easing, callback);   
  };   
  $(".thumblist li").hover(function() {  
    if(!$(this).data('pinned'))  
      $(this).children(".description").fadeToggle();  
  });  
  $(".thumblist li").click(function() {  
    $('.liselected').removeClass('liselected');  
    $(this).children('.description').addClass('liselected');  
    $(this).data('pinned', !$(this).data('pinned'));  
  });  
  });  
  </code></pre>
  
  <p>I have everything working but the last item. I've tried removing the .liselected class from all list items and then adding it to the current onclick, but it is failing. Any ideas?</p>