title: jQuery fade in/out onclick for a li
body: <p>I am setting up a services section. Each section id with it's own set of li's. I would like to have the li's hidden, display:none; and fade in onclick/fade out onclick. Having trouble writing the js for this function with my current markup and styling.</p>
  
  <p>html - </p>
  
  <pre><code>&lt;div id="small-container" class="services"&gt;
                      &lt;nav id="services-sections"&gt;
                          &lt;a class="active" href="#/one" id="nav-one"&gt;One&lt;/a&gt;
                          &lt;a href="#/two" id="nav-two"&gt;Two&lt;/a&gt;
                          &lt;a href="#/three" id="nav-three"&gt;Three&lt;/a&gt;
                          &lt;a href="#/four" id="nav-four"&gt;Four&lt;/a&gt;
                          &lt;a href="#/five" id="nav-five"&gt;Five&lt;/a&gt;
                      &lt;/nav&gt;
                      &lt;article id="section-one" class="services-content"&gt;
                          &lt;ul class="services"&gt;
                              &lt;li class="service-item"&gt;One - one &lt;/li&gt;
                              &lt;li class="service-item"&gt;One - two &lt;/li&gt;
                              &lt;li class="service-item"&gt;One - three &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/article&gt;
                      &lt;article id="section-two" class="services-content"&gt;
                          &lt;ul class="services"&gt;
                              &lt;li class="service-item"&gt;Two - one &lt;/li&gt;
                              &lt;li class="service-item"&gt;Two - two &lt;/li&gt;
                              &lt;li class="service-item"&gt;Two - three &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/article&gt;
                      &lt;article id="section-three" class="services-content"&gt;
                          &lt;ul class="services"&gt;
                              &lt;li class="service-item"&gt;Three - one &lt;/li&gt;
                              &lt;li class="service-item"&gt;Three - two &lt;/li&gt;
                              &lt;li class="service-item"&gt;Three - three &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/article&gt;
                      &lt;article id="section-four" class="services-content"&gt;
                          &lt;ul class="services"&gt;
                              &lt;li class="service-item"&gt;Four - one &lt;/li&gt;
                              &lt;li class="service-item"&gt;Four - two &lt;/li&gt;
                              &lt;li class="service-item"&gt;Four - three &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/article&gt;
                      &lt;article id="section-five" class="services-content"&gt;
                          &lt;ul class="services"&gt;
                              &lt;li class="service-item"&gt;Five - one &lt;/li&gt;
                              &lt;li class="service-item"&gt;Five - two &lt;/li&gt;
                              &lt;li class="service-item"&gt;Five - three&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/article&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>css - </p>
  
  <pre><code>#small-container { float: left; width: 240px; color: #000; font-family: Arial, Helvetica, sans-serif; }
          #small-container.services { width: 350px; }
          #services-sections a { text-decoration: none;  text-transform: none; font-weight: bold; font-size: 1em; margin-right: 12px; margin-bottom: 10px; display: inline-block; color: #222; }
          #services-sections a:hover, #services-sections a.active { color: #AAA; }
          .services-content { display: ; position: relative;  }
          .services-content.active { display: inline-block; }
          .services { list-style-position: inside; list-style: none; }
          .services { *list-style: none; }
          .services.active {}
          .service-item { text-indent: -15px; padding-left: 6px; margin-bottom: 12px; font-size: 12px; cursor: default; }
          .ie8 .service-item { text-indent: -22px; }
          .ie7 .service-item { text-indent: -18px; padding-left: 20px; }  
  </code></pre>
  
  <p>Any help would be appreciated.
  Thanks in advance!</p>