title: 6 Grid DIVs with 2 Content DIVs each and toggle-Function
body: <p>Ok, i might not seeing the wood for the trees - so here's my (probably easily solveable) problem:</p>
  
  <p>i have this markup (6x times "col-4"-DIV with content):</p>
  
  <pre><code>&lt;div class="partner inner"&gt;
   &lt;div class="col-4"&gt;
    &lt;div class="logo" id="logo-one"&gt;&lt;/div&gt;
    &lt;div class="caption hidden"&gt;
     &lt;h3&gt;Company One&lt;/h3&gt;
     &lt;address&gt;
       Some Addressinfo here...
     &lt;/address&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Situation:
  each id from class "logo" has a background-image which switches the background-position vertically on hover.
  class caption is hidden on default through helper-class "hidden"</p>
  
  <p>What i want to achieve:
  using jQuery to toggle Class "hidden" to the clicked logo.
  using jQuery to toggle the div "caption" to show the addressinfo for each company.</p>
  
  <p>My problem with this jQuery code:</p>
  
  <pre><code>        $(".logo").click(function(){
          $(".hidden").toggle(500);
          $(this).toggleClass("hidden");
      });
  </code></pre>
  
  <p>is that ALL logos disappear and only the clicked addressinfo is shown.</p>
  
  <p>How can i achieve that only the logo clicked disappears and the addressinfo behind the clicked-logo is shown?</p>
  
  <p>i'm probably just missing some easy step but i don't want to write 6 click-functions for each id - that would be too messy and probably not the right way am i right?</p>