title: Closing jQuery slideToggle + toggling class when opening another
body: <p>I'm trying to get one toggle to close when I open another. I will have many of these on several pages, so I would prefer to not have to duplicate this code for every one.</p>
  
  <p>Also, I cannot use .next(); or anything similar to that because some of the content divs that will open on click are not directly beneath the toggle link. That's why I assigned the rel attribute to a variable so I can give a unique rel to each link, then one button should open one specific div no matter where it is on the page.</p>
  
  <p>The code in the fiddle uses hide(); on all the divs before it executes, but for some reason, the class "remove-border" doesn't work reliably when I do this. You can see if you click the same item several times, the border appears and disappears. This is supposed to make a tab effect, so the border disappearing and re-appearing when the link is clicked is essential. I used toggleClass because the border needs to be added back in when a different link is clicked.</p>
  
  <p>To summarize: click item 1 removes bottom border under item 1 and opens div with class "toggle-content1". Click it again and it toggles closed and replaces border OR if you click ITEM2 it replaces the border underneath ITEM1 and  closes it, then opens ITEM2, removing the border from under ITEM2. </p>
  
  <p><strong>Here's my jQuery:</strong></p>
  
  <pre><code>jQuery(document).ready(function($){
    $( ".toggle-button" ).click(function() {
      var rel = $(this).attr('rel');
      $(".hh").hide();
        $(this).addClass("remove-border");
      $( ".toggle-content" + rel ).slideToggle( 50, function() {
  
          });
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ohLdee2g/" rel="nofollow">Here's my fiddle of what I've got so far</a>. Am I even approaching this the correct way?</p>