title: Select associated element using jQuery
body: <p>I have a text-area where each sentence has a separate text-piece (an argument) associated. By default, all the arguments are hidden, but I want jQuery to enable a toggle-function, so that when a user clicks on a sentence, the corresponding argument becomes visible beneath the entire text-area.</p>
  
  <p>However, I can't figure out how to only show the one specific argument instead of all the arguments (which is what my code does now, I know). So, how do I select the argument associated with the clicked sentence?</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>   &lt;script&gt;
         $(document).ready(function() {
             $('.arg-sentence').click(function() {
                 $('.argument').slideToggle('slow'); &lt;-- This should only select one specific argument
            });
       });
    &lt;/script&gt;
  
    {% block content %}
  
    &lt;div class="text"&gt;
    {% for arg in catalog %}
    &lt;span class="arg-sentence" id="{{ arg.id }}"&gt;{{ arg.sentence }}&lt;/span&gt;
    {% endfor %}
    &lt;/div&gt;
  
    {% endblock %}
    {% block content-secondary %}
  
    {% for arg in catalog %}
    &lt;div class="col-sm-12 content_holder well argument" id="{{ arg.id}}"&gt;
        &lt;div class="text"&gt;
            {{ arg.argument|safe }}
        &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
    {% endblock %}
  </code></pre>
  
  <p>I'm new to jQuery so it might be something very obvious..! I'm using Django by the way..</p>