title: jQuery: Hide/Show multiple divs on select change
body: <p>In my form I need to show/hide multiple divs depending on which OPTION in a SELECT was chosen.</p>
  
  <p>I can get in running but my problem is, that one div can get hidden/shown by many OPTIONS. So with my code these divs show/hide for a certain time and hide/show again then.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;select id="vFormat" name="vFormat" onchange="getval(this);"&gt;
      &lt;option value="0"&gt;Choose&lt;/option&gt;
      &lt;option value="1" class="format1"&gt;Option 1&lt;/option&gt;
      &lt;option value="2" class="format2"&gt;Option 2&lt;/option&gt;
      &lt;option value="3" class="format3"&gt;Option 2&lt;/option&gt;
      &lt;option value="4" class="format4"&gt;Option 2&lt;/option&gt;
      &lt;option value="5" class="format5"&gt;Option 2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="showdivformat1 showdivformat2 hiddenelement"&gt;
     Text of hidden Div
  &lt;/div&gt;
  
  &lt;div class="hidedivformat2 showdivformat5 visibleelement"&gt;
     Text of visible Div
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jQuery</p>
  
  <pre><code>function getval(sel) {
  
      var divval = $('.selectInput option:selected').attr('class').split(' ');
  
      for(var i=0; i&lt;divval.length; i++){
          $(".hiddenelement").hide("50");
          $(".showdiv" + divval[i]).show("50");
      }
  
      for(var i=0; i&lt;divval.length; i++){
          $(".visibleelement").show("50");
          $(".hidediv" + divval[i]).hide("50");
      }       
  }
  </code></pre>
  
  <p>I know the problem is, that I always hide the .hiddenelement and show the .visibleelement when changing the option.</p>
  
  <p>But I don`t have a solution to check if a div is already hidden oder visible and should stay like this after the option change.</p>