title: Hide or Show if Current, jQuery
body: <p>I have this list:</p>
  
  <pre><code>&lt;ul class="pagination"&gt;
      &lt;li class="dl-nav-1 current"&gt;&lt;a href="#"&gt;Spring Training 2001&lt;/a&gt;&lt;span class="visible"&gt;&lt;img src="img/indicator.png" alt="" /&gt;&lt;/li&gt;
      &lt;li class="dl-nav-2"&gt;&lt;a href="#"&gt;NFL 2011&lt;/a&gt;&lt;span class="hidden"&gt;&lt;img src="img/indicator.png" alt="" /&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li class="dl-nav-3"&gt;&lt;a href="#"&gt;Fantasy Baseball&lt;/a&gt;&lt;span class="hidden"&gt;&lt;img src="img/indicator.png" alt="" /&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need to show the <code>&lt;span&gt;</code> when the li class is current, and hide the <code>&lt;span&gt;</code> when it is not current.</p>
  
  <p>There is a JS plugin that will change the li class, so when it changes to current, make <code>&lt;span&gt;</code> visible and when it removes current, hide <code>&lt;span&gt;</code></p>
  
  <p>terrible attempt:</p>
  
  <pre><code>$(function) () {
      if($(ul.pagination li).hasClass("current")) {
          $("ul.pagination li.current span").removeClass("visible").addClass("hidden");
      } 
      else{
          $("ul.pagination li.current span").removeClass("hidden").addClass("visible")
      }
  
  };
  </code></pre>