title: slideToggle sliding up and down when you click on the links
body: <p>im having a little issue with the following code, i am wanting it to open if you click on a link, and if you click another any that are open will close before the new one opens.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;a href="#" id="link_1" class="expandCourse"&gt;test link 1&lt;/a&gt;
  &lt;div class="link_1" style="display:none;"&gt;content here&lt;/div&gt;
  
  &lt;a href="#" id ="link_2" class="expandCourse"&gt;test link 2&lt;/a&gt;
  &lt;div class="link_2" style="display:none;"&gt;content here&lt;/div&gt;
  
  &lt;a href="#" id="link_3" class="expandCourse"&gt;test link 3&lt;/a&gt;
  &lt;div class="link_3" style="display:none;"&gt;content here&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.expandCourse').on('click',function() {
      var courseID = $(this).attr('ID');
      $(this).addClass('active');
      $("."+courseID).slideToggle('slow', function() {
          if ($('.expandCourse').hasClass('active')){
              $("."+courseID).slideUp();
              $(this).removeClass('active');
          } else {
              $("."+courseID).slideDown();
              $(this).addClass('active');
          }
      }); 
      return false;
  });
  </code></pre>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/znFmc/18/" rel="nofollow">http://jsfiddle.net/znFmc/18/</a></p>
  
  <p>Thanks in advance for any help</p>