My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; which I did not add and none of the other rows have.
I am uncertain about how to remove this so that I can effectively hide the row.
Below is a snippet of my code:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("value") == "collection") {
$(".deliver-fee").hide('slow');
}
if ($(this).attr("value") == "delivery") {
$(".deliver-fee").show('slow');
}
});
$('input[type="radio"]').trigger('click');
});.delivery-fee {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-option">
<div class="form-check">
<input type="radio" class="form-check-input" name="delivery-option" id="delivery" value="delivery">
<label for="delivery" class="form-check-label">
Delivery
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="delivery-option" id="collection" value="collection">
<label for="collection" class="form-check-label">
Collection
</label>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Code</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">
<div class="float-right">
Sub Total
</div>
</th>
<td>R{{ $totalPrice }}</td>
</tr>
<tr class="deliver-fee">
<th colspan="4">
<div class="float-right">
Delivery Fee
</div>
</th>
<td>R{{ $delivery }}</td>
</tr>
</tbody>
</table>The functionality I intend is for the .delivery-fee row to be hidden by default when the page loads and then shown when the user clicks on the delivery option.