title: How to use jquery .show() to apply a function in the same parent element?
body: <p>I would like to create a simple jQuery show function to reveal class .show-more when a user clicks on the div .ask-more:</p>
  
  <pre><code>&lt;div class="participant" id="participant-1"&gt;
  
  &lt;div class="ask-more"&gt;&lt;/div&gt;
  &lt;div class="show-more" style="display:none"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="participant" id="participant-2"&gt;
  
  &lt;div class="ask-more"&gt;&lt;/div&gt;
  &lt;div class="show-more" style="display:none"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the following code (which works):</p>
  
  <pre><code>$( ".ask-more" ).click(function() {
    $( ".show-more" ).show();
  });
  </code></pre>
  
  <p>My question: at present this function shows the class for both participant ids; how can I adapt the script so that only the .show-more class in the same parent as the .ask-more class that is clicked on is revealed? I.e. click ask-more in #participant-1 div and only show-more in #participant-1 is revealed, not both.</p>
  
  <p>Please note, I don't want to use individual #participant-1/2 references, as I need this to scale hundreds of times. I am essentially asking for a relative lookup in jQuery</p>
  
  <p>Thanks</p>