title: Slidetoggle 2 adjacent divs
body: <pre><code>&lt;div class="unique1"&gt;Blabla1&lt;/div&gt;
  &lt;div class="amministrazione"&gt;Amministrazione&lt;/div&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  &lt;div class="didattica"&gt;Didattica&lt;/div&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  
  &lt;div class="unique2"&gt;Blabla2&lt;/div&gt;
  &lt;div class="amministrazione"&gt;Amministrazione&lt;/div&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  &lt;div class="didattica"&gt;Didattica&lt;/div&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  
  &lt;div class="unique3"&gt;Blabla3&lt;/div&gt;
  &lt;div class="amministrazione"&gt;Amministrazione&lt;/div&gt;
  &lt;div class="didattica"&gt;Didattica&lt;/div&gt;
  
  &lt;div class="unique4"&gt;Blabla4&lt;/div&gt;
  &lt;div class="amministrazione"&gt;Amministrazione&lt;/div&gt;
  &lt;div class="didattica"&gt;Didattica&lt;/div&gt;
  &lt;a href=""&gt;some link&lt;/a&gt;
  </code></pre>
  
  <p>I'd like to have .amministrazione, .didattica and all the links on <code>display:none</code> by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.</p>
  
  <p>Here's what I have so far.. but it's not toggling the correct elements:</p>
  
  <pre><code>jQuery(function () {
      jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
          var index = $(this).index(),
              newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
          jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
  
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2rgqpzpt/" rel="nofollow">http://jsfiddle.net/2rgqpzpt/</a></p>