title: Complicated Conditional
body: <p>I have a set of instruction at the top of my page:</p>
  
  <pre><code>    &lt;div class="instructions"&gt;
          &lt;div id="step1" class="step"&gt;&lt;span class="step_active"&gt;1&lt;/span&gt;&lt;span class="step_title_active"&gt;General Info&lt;/span&gt;&lt;/div&gt;
          &lt;div id="step2" class="step"&gt;&lt;span class="step_next"&gt;2&lt;/span&gt;&lt;span class="step_title"&gt;Select Contact&lt;/span&gt;&lt;/div&gt;
          &lt;div id="step3" class="step"&gt;&lt;span class="step_next"&gt;3&lt;/span&gt;&lt;span class="step_title"&gt;Log Details&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I have a form that reveals itself as conditions are met. 
  The first condition being that both select boxes must have options selected, before the next part appears.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ajaxSuccess(function () {
      $("#test").hide();
      $("#comType, #comDirection").bind('change', function () {
          // show the button if they both have a value
          if ($("#comType").val().length &gt; 1 &amp;&amp; $("#comDirection").val().length &gt; 1) {
              $("#test").fadeIn();
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I change the classes in #step1 #step2 so that when the above conditions are met, they appear as:</p>
  
  <pre><code>   &lt;div id="step1" class="step"&gt;&lt;span class="step_complete"&gt;1&lt;/span&gt;&lt;span class="step_title"&gt;General Info&lt;/span&gt;&lt;/div&gt;
      &lt;div id="step2" class="step"&gt;&lt;span class="step_active"&gt;2&lt;/span&gt;&lt;span class="step_title_active"&gt;Select Contact&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thoughts?</p>