How to show/hide divs based on whether or not a radio button is checked using only css

Question

I am trying to show/hide divs depending on whether or not a radio button is checked. The divs are after the input buttons in a separate section of the page and I am having trouble referencing them.

The code is for an embedded donation form so I can't actually change the html. I can only change the css...

Here is a link to a jsfiddle with the relevant code: JS FIDDLE OF MY PROBLEM

I have looked at several posts for doing this with sibling or child elements but none of those solutions have worked for my less directly related elements. I also know that my ~ connector is not accurate but I left it there as a placeholder. Thanks for any help.

Here is the relevant 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_AmountItemDiv">
            <input type="radio" name="IATS_NewAmountListItem" class="IATS_RadioAmtButton" id="IATS_Amount_Order_3" value="250" />
            <label class="IATS_RadioAmtLabel" for="Amount_Order_3" id="IATS_AmountName_Order_3">$250</label>
            <div class="IATS_QtyDiv" style="display: none;">
              <button class="IATS_IncreaseQty" type="button">+</button>
              <input type="input" id="IATS_Payment_Qty3" 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_4" value="500" />
            <label class="IATS_RadioAmtLabel" for="Amount_Order_4" id="IATS_AmountName_Order_4">$500</label>
            <div class="IATS_QtyDiv" style="display: none;">
              <button class="IATS_IncreaseQty" type="button">+</button>
              <input type="input" id="IATS_Payment_Qty4" class="IATS_QtyInput" maxlength="6" />
              <button type="button" class="IATS_IncreaseQty">-</button>
            </div>
          </div>
          <div class="IATS_AmountItemDiv" id="IATS_AmountListItemDiv_Other">
            <input type="radio" name="IATS_NewAmountListItem" class="IATS_RadioAmtButton" id="IATS_Amount_Other" value="OtherAmount" />
            <label class="IATS_RadioAmtLabel" for="IATS_Amount_Other" id="IATS_AmountName_Order_Other"></label>
            <input name="IATS_AmountListItem_NewOtherAmount" class="IATS_OtherAmount" id="IATS_AmountListItem_NewOtherAmount" /><span class="IATS_PaymentLabelOnLeft IATS_PaymentMinimumErrorMessage" id="IATS_PaymentItemErrorMesssage_Min">Input amount must be more than
              minimum</span>

            <div class="IATS_QtyDiv" style="display: none;">
              <input type="input" id="IATS_Payment_QtyOther" class="IATS_QtyInput" maxlength="6" />
            </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>




          <!-- HERE IS THE 1ST DIV I WANT TO DISPLAY WHEN input#input#IATS_Amount_Order_2 IS CHECKED -->

          <div class="IATS_PaymentItemDiv" id="IATS_PaymentItemDiv_Comment">
            <label class="IATS_PaymentLabelOnLeft" for="IATS_PaymentItemInput_Comment">What size and gender Tshirt?</label>
            <textarea name="IATS_PaymentItemInput_Comment" class="IATS_PaymentInputField" cols="22" rows="3" id="IATS_PaymentItemInput_Comment"></textarea><span class="IATS_PaymentLabelOnLeft IATS_PaymentItemErrorMessage" id="IATS_PaymentItemErrorMesssage_Comment">Comment is Required</span>

          </div>

          <!-- HERE IS THE 2ND DIV I WANT TO DISPLAY WHEN input#input#IATS_Amount_Order_2 IS CHECKED -->

          <div class="IATS_PaymentItemDiv" id="IATS_PaymentItemDiv_Item2">
            <label class="IATS_PaymentLabelOnLeft" for="IATS_PaymentItemInput_Item2">Please select your thank you gift</label>
            <div>
              <select name="IATS_PaymentItemInput_Item2" id="IATS_PaymentItemInput_Item2" class="IATS_PaymentInputField">
                <option value="">-Select</option>
                <option value="I want 100% of my donation to go to SAC">I want 100% of my donation to go to SAC</option>
                <option value="Tshirt + Mesh Sport Hat">Tshirt + Mesh Sport Hat</option>
                <option value="Tshirt + Visor">Tshirt + Visor</option>
                <option value="Tshirt + Trucker Hat ">Tshirt + Trucker Hat</option>
              </select>
            </div><span class="IATS_PaymentLabelOnLeft IATS_PaymentItemErrorMessage" id="IATS_PaymentItemErrorMesssage_Item2">Item 2 is Required</span>

          </div>
        </div>
  </form>
  </div>

Answer 1

You can use CSS selector, here an example.

http://jsfiddle.net/fosz775j/1/

<input type="checkbox" id="test" name="test"> 
<label for="test">your text</label>



input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
    display: none; /* HIDE YOUR ELEMENT */
  font-style: normal;
}