how can i selec only the element in the same div with jquery
$('.to-show').hide();
$('#offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$('.to-show').hide();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>So this only work with first select option
How i can make it work with the second select option what i am missing here ?
i tried also $(this).closest('.wrapper').find('.to-show').toggle();
but that did not work
thank you
Having two elements with the same id is invalid html. Switch it to use class or another attribute. But you have a second problem with $('.to-show').hide();, it is always hiding both .to-show.
$('.to-show').hide();
$('.offset').on('change', function() {
if ($(this).val() == "Custom") {
$(this).closest('.wrapper').children('.to-show').toggle();
} else {
$(this).closest('.wrapper').children('.to-show').hide();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<td class="value">
<select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="15" selected="selected" class="attached enabled">15</option>
<option value="Custom" class="attached enabled">Custom</option>
</select> </td>
</div>
<div class="to-show">
<div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div>
</div>
</div>