title: jQuery issue with $(this).toggleClass and Multiple btns and elements
body: <p>I am having trouble figuring this out. I have come up with jQuery that I can use multiple buttons to open a corresponding div using css transitions. I don't want to use text but the + and - to illustrate that the item is open and closed.</p>
  
  <p>I want the + to change to - when you click on other + items. I also want the + on the current item to toggleClass or change from + to - and back to +</p>
  
  <p>I am hoping that a fresh set of eyes with more JS skill can set me straight.</p>
  
  <p>So here is my code...</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;style&gt; 
  
  .btn {display:inline-block; text-decoration:none; width:20px; margin:1%; padding:.3em .8em; border-radius:20px; color:#fff; text-align:center; background-color:#FFB50B;}
  
  .btn:hover {cursor:pointer; opacity:.7; color:#000;}
  
  .btn-pnl:before {content:"+"; font-weight:600px;}
  
  .btn-pnl-viz:before {content:"-";}
  
  .hidden {visibility:hidden;}
  
  .panels-wrap {width:870px; height:auto; margin:0 auto; padding:0;}
  
  .panel {width:98%; height:0px; float:left; margin:0 1%; padding:0; opacity:0; visibility:hidden; background:#f60; color:rgba(0,0,0,0);
  
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  
  }
  
  .panel-trn {width:100%; height:100px; visibility:visible; opacity:1; color:rgba(0,0,0,1); background:#0F0}
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  
  $("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding selector from data-toggle
  $(selector).toggleClass('panel-trn').siblings().removeClass("panel-trn");           
  });
  
  $('a').click(function() {
  $("a").removeClass("btn-pnl-viz");
  
  //Tried this and no luck &gt; $(this).toggleClass('btn-pnl-viz');
  
  if ($(this).hasClass("btn-pnl-viz")){
  $(this).removeClass("btn-pnl-viz");
  }else{
  $(this).toggleClass("btn-pnl-viz");
  };         
  }); 
  });
  
  
  &lt;/script&gt;
  
  &lt;div&gt;
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div1" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div2" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div3" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="div1" class="panel"&gt;div 1&lt;/div&gt;
  &lt;div id="div2" class="panel"&gt;div 2&lt;/div&gt;
  &lt;div id="div3" class="panel"&gt;div 3&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div4" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div5" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;a href="#" data-toggle="#div6" class="btn btn-pnl"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="div4" class="panel"&gt;div 1&lt;/div&gt;
  &lt;div id="div5" class="panel"&gt;div 2&lt;/div&gt;
  &lt;div id="div6" class="panel"&gt;div 3&lt;/div&gt;
  </code></pre>
  
  <p>I can get everything to work except I cant get the button to toggle the + and - if I click the same button twice. I also cannot get the existing active to close when clicking on another button out side of the container div.</p>
  
  <p>Total Newb question I know but, if someone could help I would greatly appreciate it... many hours on this!</p>
  
  <p>Thanks!</p>