this find parent of another div and toggle its child using jQuery
<p>I've done some research and nothing seems to be working.  Here is the HTML followed by the JavaScript I am putting together.  What I am trying to do is set it up so that whenever dashboard_gear_options is clicked, it toggles the appropriate hidden options row.  Each block of code exists multiple times at different locations on the page.  I tried using this, find, parent, next and children to no avail.</p>

<p>HTML:</p>

<pre><code>// start block
&lt;div class="content_block_holder"&gt;
   &lt;div class="content_top"&gt;
      &lt;div class="dashboard_gear_options"&gt;&lt;/div&gt;
      &lt;div class="dashboard_gear_divider"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="dashboard_holder"&gt;
      &lt;div class="hidden_options_row"&gt;&lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
// end block

// start block
&lt;div class="content_block_holder"&gt;
   &lt;div class="content_top"&gt;
      &lt;div class="dashboard_gear_options"&gt;&lt;/div&gt;
      &lt;div class="dashboard_gear_divider"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="dashboard_holder"&gt;
      &lt;div class="hidden_options_row"&gt;&lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
// end block (etc..)
</code></pre>

<p>JS:</p>

<pre><code>$(document).ready(function(){
   $('.dashboard_gear_options').click(function(){
       $(this).parent('.content_block_holder').find('.hidden_options_row').toggle();        
    });
});
</code></pre>
