I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately.
This code is for an embedded donation form, hence, I cannot modify the HTML directly. My only option is to make changes to the CSS...
For the relevant code snippet, you can refer to this JSFiddle link: JS FIDDLE OF MY PROBLEM
I have gone through various posts discussing similar tasks with sibling or child elements. However, none of those solutions seem to align with my situation involving less direct connections between elements. Additionally, I acknowledge that my "~" connector may not be entirely accurate, but it serves as a placeholder. Thank you for any assistance provided.
Here's the pertinent HTML:
div#IATS_PaymentItemDiv_Comment,
div#IATS_PaymentItemDiv_Item2 {
display: none;
}
input#IATS_Amount_Order_2:checked ~ div#IATS_PaymentItemDiv_Comment {
display: block;
}
input#IATS_Amount_Order_2:checked ~ div#IATS_PaymentItemDiv_Item2 {
display: block;
}<div class="IATS_Div" id="IATS_PaymentBoxDiv">
<form name="IATSPaymentBoxForm" id="IATSPaymentBoxForm" action="javascript:">
<div class="IATS_InnerDiv">
<div class="IATS_HeaderDiv"></div>
<div class="IATS_ContentDiv" id="IATS_ContentSectionDiv">
<label class="IATS_EventTitle">Join the Sierra Avalanche Center <span class="form-required">*</span>
</label>
<div class="IATS_AmountDiv" id="IATS_AmountSectionDiv">
<div class="IATS_AmountItemDiv">
<input type="radio" name="IATS_NewAmountListItem" class="IATS_RadioAmtButton" id="IATS_Amount_Order_0" value="35" checked="checked" />
<label class="IATS_RadioAmtLabel" for="Amount_Order_0" id="IATS_AmountName_Order_0">$35</label>
<div class="IATS_QtyDiv" style="display: none;">
<button class="IATS_IncreaseQty" type="button">+</button>
<input type="input" id="IATS_Payment_Qty0" class="IATS_QtyInput" maxlength="6" />
<button type="button" class="IATS_IncreaseQty">-</button>
</div>
</div>
<div class="IATS_AmountItemDiv">
<input type="radio" name="IATS_NewAmountListItem" class="IATS_RadioAmtButton" id="IATS_Amount_Order_1" value="50" />
<label class="IATS_RadioAmtLabel" for="Amount_Order_1" id="IATS_AmountName_Order_1">$50</label>
<div class="IATS_QtyDiv" style="display: none;">
<button class="IATS_IncreaseQty" type="button">+</button>
<input type="input" id="IATS_Payment_Qty1" class="IATS_QtyInput" maxlength="6" />
<button type="button" class="IATS_IncreaseQty">-</button>
</div>
</div>
<div class="IATS_AmountItemDiv">
<!--HERE IS THE RADIO BUTTON I WANT TO 'LISTEN' FOR -->
<input type="radio" name="IATS_NewAmountListItem" class="IATS_RadioAmtButton" id="IATS_Amount_Order_2" value="100" />
<label class="IATS_RadioAmtLabel" for="Amount_Order_2" id="IATS_AmountName_Order_2">$100</label>
<div class="IATS_QtyDiv" style="display: none;">
<button class="IATS_IncreaseQty" type="button">+</button>
<input type="input" id="IATS_Payment_Qty2" class="IATS_QtyInput" maxlength="6" />
<button type="button" class="IATS_IncreaseQty">-</button>
</div>
</div>
[…]
<div class="IATS_TotalDiv" style="display: none;">Total: $<span id="IATS_Payment_TotalAmount" value="0.00">100.00</span>
<input name="IATS_AmountListItem" id="IATS_AmountListItem" style="display: none;" />
<input name="IATS_AmountListItem_OtherAmount" id="IATS_AmountListItem_OtherAmount" style="display: none;" />
</div><span class="IATS_PaymentLabelOnLeft IATS_PaymentMinimumErrorMessage" id="IATS_PaymentItemErrorMesssage_NonAmount">Please select at least one
amount item.</span>
</div>
<div class="IATS_PaymentDiv" id="IATS_PaymentSectionDiv"> <span class="IATS_PaymentSectionTitle">Payment Information</span><span class="IATS_PaymentSectionNote"><b>Bold</b> field is required input</span>
[…]
</div>
</form>
</div>