Onilol Onilol - 7 months ago 25
Javascript Question

select child element jQuery

I have a table structured like this:

<table>
<tbody>
for loop here
<tr>
<td>Item X Attribute 1</td>
<td>Item X Attribute 2</td>
<td><button name="test" onclick="display_variants()">Hide my kids</button></td>
</tr>
<tr>
<tbody class="variants_info">
<tr>
<td>Item X Variant 1</td>
<td>Item X Variant 2</td>
</tr>
</tbody>
</tr>
endfor loop
</tbody>
</table>


So that structure repeats Y amount of times.

I'm trying to make a script that hides the
tbody.variants
of the row selected.

What I have so far is this:

<script>
function display_variant(){
if($('.variants_info').is(":visible")){
$('.variants_info').hide();
}
else{
$('.variants_info').show();
}
}
</script>


but this hides the variants from ALL the rows.

Is there a way to select the childs of the specific row? Also how can I start with the
tbody.variants
hidden? (Start as in when I visit the page).

Edit: At the moment is looking closely to this:
enter image description here

Update:
I've managed to change the structure to this:

<table>
for loop
<tbody>
<tr>
<td>image for el 1</td>
<td>attr for el 1</td>
<td><button type='button' name='test'>Click Me</button></td>
</tr>
for loop
<tr class='variants_info'>
<td>variant1 for el 1</td>
<td>variant2 for el 1</td>
</tr>
endfor
</tbody>
endfor
</table>


Update 2: The actual code is this one:

<table class="pure-table pure-table-bordered">
<tbody>
{% for product in collection.products %}
{% if product.available %}

<tr class="{% cycle 'pure-table-odd', '' %}">
<td>
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
</td>
<td>{{ product.title }}</td>
<td style="text-align:right">
<button type="button" name="click_me">Click Me</button>
</td>
</tr>
{% for variant in product.variants %}
<tr>
<td>{{variant.title}}</td>
<td>{{variant.price | money }}</td>
</tr>
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>

<script>
$("td button").click(function(){
$(this).closest('tr').next().toggle();
})
</script>


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 )

Answer

I would suggest to mark the rows that contain the products with a class name, e.g. "product", like this:

<tr class="product {% cycle 'pure-table-odd', '' %}">
  <td>
    <img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
  </td>
  <td>{{ product.title }}</td>
  <td style="text-align:right">
    <button type="button" name="click_me">Click Me</button>
  </td>
</tr>

You would not add that class to the rows that have the variants.

Then in your JavaScript use the nextUntil method to match all next variant rows (which do not have the "product" class) until, but excluding, the next product row, and apply the toggle() method to all these:

$("td button").click(function(){
    $(this).closest('tr').nextUntil('.product').toggle();
});