title: jQuery animating div switcher for corresponding list-item
body: <p>I'm currently learning jquery and have run into a snag. I'm working on building a page with two sections. One is an unordered list of food types. The other is a set of divs with each displaying different types of beer that would complement each of the food types. Each list-item and its corresponding div share the same class. All of the divs are positioned out of view to start.</p>
  
  <p>What I want to accomplish is that onclick of each list-item, whatever div that is in view animates out of view, and then the corresponding div of the clicked list-item animates into view.</p>
  
  <p>I got this working, but then for some reason, it stopped working. I do not know if this has something to do with my code or if there is a better way to go about accomplishing this project.</p>
  
  <pre><code>    $(function(){
         $('.beer_container &gt; div.default').css('top', '0');
         $('ul.food_items li').click(function(){
          var theClass = $(this).attr('class');
          var $theBeer = $('div.beer_container &gt; div[class="+ theClass +"]');
          var $oldBeer = $('div.beer_container &gt; div:not([class="+ theClass +"])');
  
            $oldBeer.animate(
             {'top': '-420'}, 
              'slow', function(){
            $theBeer.animate(
             {'top': '0'}, 'slow');
             });
           });
  
        });
  
  
  
  
          &lt;div class="left food_container"&gt;
            &lt;ul class="food_items"&gt;
              &lt;li class="lighter_foods"&gt;Lighter Foods&lt;/li&gt;
              &lt;li class="classic_burger"&gt;Classic Burger&lt;/li&gt;
              &lt;li class="strong_spicy"&gt;Strong &amp;amp; Spicy&lt;/li&gt;
              &lt;li class="rich_hearty"&gt;Rich &amp;amp; Hearty&lt;/li&gt;
              &lt;li class="smoked"&gt;Smoked Meats&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="right beer_container"&gt;
            &lt;div class="default"&gt;
              This is the intro page. What are you eating?
            &lt;/div&gt;
            &lt;div class="lighter_foods"&gt;
              Blonde Ale, Hefeweizen, Wheat Ale, Witbier, Pilsener
            &lt;/div&gt;
            &lt;div class="classic_burger"&gt;
              Pale Ale, Amber/Red Ale, Amber Lager
            &lt;/div&gt;
            &lt;div class="strong_spicy"&gt;
              IPA, Amber/Red Ale, Abbey Tripel, Sweet or Oatmeal Stout, Oktoberfest/Maerzen, Pale Bock
            &lt;/div&gt;
            &lt;div class="rich_hearty"&gt;
              Bitter, Scotch Ale, Brown Ale, Abbey Dubbel, Old or Strong Ale, Porter, Dry Stout, Dunkelweizen, Weizenbock, Doppelbock, Dark Lager
            &lt;/div&gt;
            &lt;div class="smoked"&gt;
              Double/Imperial IPA, Brown Ale, Abbey Dubbel, Porter, Imperial Stout
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>