title: Show / Hide only Closest Elements
body: <p>I'm pretty new to javascript/jQuery, and I'm trying to build a menu of sorts that shows/hides different elements when an element is clicked. When div A is clicked, it hides div A, shows div B in it's place, and shows a unordered list. When div B is clicked it hides div B, shows div A, and hides the ul.</p>
  
  <p>I have it about 90% of the way there, but I need a little help. I'm trying to only affect the closest divs and uls, but it seems as though everything is being affected. From the information I read, It seems as though I should be using <code>.siblings</code> and <code>.closest</code> which I am, but clearly I'm doing something incorrectly.</p>
  
  <p>JS Fiddle Link: <a href="http://jsfiddle.net/w5VXr/6/" rel="nofollow">http://jsfiddle.net/w5VXr/6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="essFeatureHeader"&gt;Appointment Scheduling&lt;/div&gt;
  &lt;div class="essFeatureHeader hidefeature"&gt;Appointment Scheduling&lt;/div&gt;
       &lt;ul class="featureList"&gt;
           &lt;li class="alternate"&gt;Unlimited Online Scheduling&lt;/li&gt;
       &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>$(document).ready(function($) {
      jQuery(".featureList").hide();
      jQuery(".hidefeature").hide();
  
      jQuery(".essFeatureHeader").click(function() {
              $(this).closest('.essFeatureHeader').siblings(".featureList").show("slow");
                              $(this).closest('.essFeatureHeader').hide();
                              $(this).closest('.essFeatureHeader').siblings('.hidefeature').show(); 
          });
      jQuery(".hidefeature").click(function() {
                              $(this).closest('.hidefeature').siblings('.essFeatureHeader').show();
                              $(this).closest('.hidefeature').siblings('.featureList').hide();
                              $(this).closest('.hidefeature').siblings('.hidefeature').show();
          });
  });
  </code></pre>