title: toggle class with js, only to selected div
body: <p>I am trying to toggle visibility on a div by clicking a button in a <em>neighboring</em> div. I'm using a class <code>.expand</code> to fire the onClick and another class <code>.target</code> as the target, but the problem is that every div with the <code>.target</code> class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: <a href="http://www.bootply.com/oSGM0jOG6q#" rel="nofollow">http://www.bootply.com/oSGM0jOG6q#</a>.</p>
  
  <pre><code>$('.expand').on('click', function(e){
  
      $(".target").toggleClass("hidden");
      $(".target").toggleClass("visible");
  
  });
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code> &lt;!-- Thumbnail --&gt;
    &lt;div class="col-sm-4"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;img src="//placehold.it/400x300&amp;amp;text=Photo1"&gt;
        &lt;div class="caption"&gt;
          &lt;h3&gt;Thumbnail label&lt;/h3&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-primary expand" role="button"&gt;Expand&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Big-Image --&gt;
    &lt;div class="col-xs-12 target hidden"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;img src="//placehold.it/1200x900&amp;amp;text=Photo1"&gt;
        &lt;div class="caption"&gt;
          &lt;h3&gt;HighRes&lt;/h3&gt;
          &lt;p&gt;&lt;a href="#" class="btn btn-primary btn-danger expand" role="button"&gt;Close&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.</p>