title: jquery fadetoggle on multiple divs
body: <p>now I read all fadeToggle articles but can't get it working:</p>
  
  <p>I select different divs (para1, para 2 etc.) by toggle (with css .hidden {display: none;}) by dropdown and it works perfect. But I want to fade the divs smooth in. As soon as I change the .toggle to .fadeToggle (or fadeIn) the output is completely mixed up.</p>
  
  <p>Has anybody an idea why and what I make wrong?</p>
  
  <p>The html is:</p>
  
  <pre><code>&lt;div id="dropdown"&gt;
  &lt;select id="tables" name="tables[]" onchange="changeHandler()"&gt;
  &lt;option value="defcont" selected&gt;Select some content&lt;/option&gt;
  &lt;option value="cont1"&gt;Content 1&lt;/option&gt;
  &lt;option value="cont2"&gt;Content 2&lt;/option&gt;
  &lt;option value="cont3"&gt;Content 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;&lt;!-- DROPDOWN --&gt;
  
  
  &lt;div id="paragraphs"&gt;
  &lt;div id="paradefault"&gt;This is the default content without selection&lt;/div&gt;
  &lt;div id="para1" class="hidden"&gt;You see now content 1.&lt;/div&gt;
  &lt;div id="para2" class="hidden"&gt;You see now content 2.&lt;/div&gt;
  &lt;div id="para3" class="hidden"&gt;You see now content 3?.&lt;/div&gt;
  &lt;/div&gt;&lt;!-- paragraphs --&gt;
  </code></pre>
  
  <p>The Script is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#tables').change(function(e){
  $('#paradefault').toggle($('option[value="defcont"]:selected',this).length &gt; 0);
  $('#para1').toggle($('option[value="cont1"]:selected',this).length &gt; 0);
  $('#para2').toggle($('option[value="cont2"]:selected',this).length &gt; 0);
  $('#para3').toggle($('option[value="cont3"]:selected',this).length &gt; 0);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The most near article is this: <a href="https://stackoverflow.com/questions/7179794/fadetoggle-multiple-div-tags-via-drop-down-menu">&#39;fadeToggle&#39; multiple div tags via drop down menu</a> - but just with toggle and not dafeToggle.</p>
  
  <p>Any help is very appreciated!</p>