title: How to targeting Specific Elements with Common Classes, using jQuery Toggle?
body: <p>I'm creating a drop down menu that will be reused many times on a single page. </p>
  
  <p>The following code works great when there's only one drop down menu. But when there are multiple drop downs, clicking a single <code>.dropdown</code> will result in all the <code>.dd_menu</code>'s on the page being revealed. </p>
  
  <h2>JS:</h2>
  
  <pre><code>$(document).ready(function() {
     $('.dropdown').click(function(){
        $('.dd_menu').toggle();
     });
  });
  </code></pre>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;a class="mini_button" href="#"&gt;Actions&lt;/a&gt;
  
      &lt;div class="dd_menu"&gt;
          &lt;a href="http://example.com"&gt;Link&lt;/a&gt;
          &lt;a href="http://example.com"&gt;Link&lt;/a&gt;
          &lt;a href="http://example.com"&gt;Link&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Is there some what to target only the <code>.dd_menu</code> that is inside the particular <code>.downdown</code> which was clicked?</strong> </p>