I would like to create a simple jQuery show function to reveal class .show-more when a user clicks on the div .ask-more:

```
<div class="participant" id="participant-1">

<div class="ask-more"></div>
<div class="show-more" style="display:none"></div>

</div>

<div class="participant" id="participant-2">

<div class="ask-more"></div>
<div class="show-more" style="display:none"></div>

</div>

```

I have the following code (which works):

```
$( ".ask-more" ).click(function() {
  $( ".show-more" ).show();
});

```

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.

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

Thanks