title: Show/hide and change icon with jQuery
body: <p>OK, I have couple of elements, when clicked they need to have an icon changed and show a corresponding hidden element. I feel like I'm quite close but still something is missing and the code works only partially:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(".fList").hide();
  $(".features").click(function() {
      var that = this;
      var pid  = $(this).attr("id")+"C";
      $(".fList:visible").slideUp();
      $(".features .ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
      $("#"+pid).slideDown(function(){
          $("span.ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
      });
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td id="f1" class="features"&gt;
      &lt;span class="uico ui-icon-triangle-1-e icoSpan"&gt;&lt;/span&gt;Features
    &lt;/td&gt;
    &lt;td id="f2" class="features"&gt;
      &lt;span class="uico ui-icon-triangle-1-e icoSpan"&gt;&lt;/span&gt;Features
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;div id="f1C" class="fList"&gt;
  111111
  &lt;/div&gt;  
  
  &lt;div id="f2C" class="fList"&gt;
  22222
  &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing? I need to be able to close all or open only one area...</p>