title: How to show/hide a section of content when a corresponding menu item is clicked, while hiding all other content?
body: <p>I'm trying to show the contents of a section when a menu item is clicked, while hiding the contents of all the other sections on the page.</p>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;nav&gt;
   &lt;ul&gt;
    &lt;li class="navServe"&gt;services&lt;/li&gt;
    &lt;li class="navContact"&gt;contact&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section class="services s-h"&gt;
   &lt;h1&gt;Contents of services section&lt;/h1&gt;
  &lt;/section&gt;
  
  &lt;section class="contact s-h"&gt;
   &lt;h1&gt;Contents of contact section&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The css is as simple as using a display none to hide the sections that contain the content.</p>
  
  <p>And I've been trying this jQuery:</p>
  
  <pre><code>$("nav ul li").click(function(){
  $(".content").children(".s-h").css("display", "block");
  $(this).siblings(".s-h").css("display", "none");
  });
  </code></pre>
  
  <p>But the jQuery is not finding the active section. In fact it's displaying the content of both sections (services and content) when either of the menu items are clicked. How can I make the jQuery find the content of the corresponding menu item?</p>