title: select child element jQuery
body: <p>I have a table structured like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
    for loop here
      &lt;tr&gt;
        &lt;td&gt;Item X Attribute 1&lt;/td&gt;
        &lt;td&gt;Item X Attribute 2&lt;/td&gt;
        &lt;td&gt;&lt;button name="test" onclick="display_variants()"&gt;Hide my kids&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;tbody class="variants_info"&gt;
          &lt;tr&gt;
            &lt;td&gt;Item X Variant 1&lt;/td&gt;
            &lt;td&gt;Item X Variant 2&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/tr&gt;
  endfor loop
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So that structure repeats Y amount of times.</p>
  
  <p>I'm trying to make a script that hides the <code>tbody.variants</code> of the row selected.</p>
  
  <p>What I have so far is this:</p>
  
  <pre><code>&lt;script&gt;
    function display_variant(){
      if($('.variants_info').is(":visible")){
          $('.variants_info').hide();
      }
      else{
          $('.variants_info').show();
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>but this hides the variants from <strong>ALL</strong> the rows.</p>
  
  <p>Is there a way to select the childs of the specific row? Also how can I start with the <code>tbody.variants</code> hidden? (Start as in when I visit the page).</p>
  
  <p>Edit: At the moment is looking closely to this:
  <a href="https://i.stack.imgur.com/t4JCa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t4JCa.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong>
  I've managed to change the structure to this:</p>
  
  <pre><code>&lt;table&gt;
    for loop
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;image for el 1&lt;/td&gt;
          &lt;td&gt;attr for el 1&lt;/td&gt;
          &lt;td&gt;&lt;button type='button' name='test'&gt;Click Me&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
        for loop
          &lt;tr class='variants_info'&gt;
            &lt;td&gt;variant1 for el 1&lt;/td&gt;
            &lt;td&gt;variant2 for el 1&lt;/td&gt;
          &lt;/tr&gt;
        endfor
      &lt;/tbody&gt;
    endfor
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Update 2:</strong> The actual code is this one:</p>
  
  <pre><code>&lt;table class="pure-table pure-table-bordered"&gt;
    &lt;tbody&gt;
    {% for product in collection.products %}
    {% if product.available %}
  
      &lt;tr class="{% cycle 'pure-table-odd', '' %}"&gt;
        &lt;td&gt;
          &lt;img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" /&gt;
        &lt;/td&gt;
        &lt;td&gt;{{ product.title }}&lt;/td&gt;
        &lt;td style="text-align:right"&gt;
          &lt;button type="button" name="click_me"&gt;Click Me&lt;/button&gt;
        &lt;/td&gt;
        &lt;/tr&gt;
        {% for variant in product.variants %}
      &lt;tr&gt;
        &lt;td&gt;{{variant.title}}&lt;/td&gt;
        &lt;td&gt;{{variant.price | money }}&lt;/td&gt;
      &lt;/tr&gt;
      {% endfor %}       
          {% endif %}
          {% endfor %}
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
    $("td button").click(function(){
      $(this).closest('tr').next().toggle();
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>I still can't get the JS to work.. =/ Current one is only hiding the first variant( Instead of all the variants for the clicked button )</p>