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



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

i trying show/hide divs depending on whether or not radio button checked. divs after input buttons in separate section of page , having problem referencing them.

the code embedded donation form can't alter html. can alter css...

here link jsfiddle relevant code: js fiddle of problem

i have looked @ several posts doing sibling or kid elements none of solutions have worked less straight related elements. know ~ connector not accurate left there placeholder. help.

here relevant html:

class="snippet-code-css lang-css prettyprint-override">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; } class="snippet-code-html lang-html prettyprint-override"><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 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 radio button want 'listen' --> <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 more 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 @ to the lowest degree 1 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 required input</span> <!-- here 1st div want display when input#input#iats_amount_order_2 checked --> <div class="iats_paymentitemdiv" id="iats_paymentitemdiv_comment"> <label class="iats_paymentlabelonleft" for="iats_paymentiteminput_comment">what size , 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 required</span> </div> <!-- here 2nd div want display when input#input#iats_amount_order_2 checked --> <div class="iats_paymentitemdiv" id="iats_paymentitemdiv_item2"> <label class="iats_paymentlabelonleft" for="iats_paymentiteminput_item2">please select give thanks 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 donation go sac">i want 100% of donation go 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 required</span> </div> </div> </form> </div>

you can utilize css selector, here 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 element */ font-style: normal; }

css radio-button show-hide checked

Comments

Post a Comment

Popular posts from this blog

assembly - What is the addressing mode for ld, add, and rjmp instructions? -

assembly - What is the addressing mode for ld, add, and rjmp instructions? - hey guys know ldi (load immediate) addressing mode set immediate , st instruction addressing mode set index. however, have no thought others curious are! thanks :) the addressing modes explained in instruction set, in first few pages. in table of instructions see operands instruction determine addressing mode. mode indicated arguments assembly instruction. for example, ld had several different ways of operating, depending on arguments. 1 of them ld rd,x d number of register, such ld r3,x . ld r3,-z else (although both indirect addressing). rjmp k relative addressing, jumping pc + k + 1. add rr,rd direct register addressing. result contained in rd. assembly avr instructions
Read more

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? -

vowpalwabbit - Interpreting Vowpal Wabbit results: Why are some lines appended by "h"? - below part of log training vw model. why of these lines followed h? you'll notice that's true of "average loss" line in summary @ end. i'm not sure means, or if should care. ... average since illustration illustration current current current loss lastly counter weight label predict features 1.000000 1.000000 1 1.0 -1.0000 0.0000 15 0.500000 0.000000 2 2.0 1.0000 1.0000 15 1.250000 2.000000 4 4.0 -1.0000 1.0000 9 1.167489 1.084979 8 8.0 -1.0000 1.0000 29 1.291439 1.415389 16 16.0 1.0000 1.0000 45 1.096302 0.901166 32 32.0 -1.0000 -1.0000 21 1.299807 1.503312 64 64.0 -1.0000 1.0000 ...
Read more

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? -

Is there a way to convert an HTML page styled with Bootstrap CSS into email-compatible html? - is there way convert html page styled bootstrap css html email compatible form? see there exclusively different css frameworks, ink, creating email compatible html, there flow creating email doesn't require utilize of different css framework? there html -> pdf -> email html flow? or other flow? no, couple of reasons... first, there no reliable css or html email. clients on place in terms of css back upwards & how render html, structural/semantic problem. isn't converting classes much altering html structure. as explained in this css tricks post, typical solution ol-skool techniques table-based layouts, requiring exclusively restructure existing html. have add together client-specific hacks. second, , more importantly, shouldn't send everything on existing page email. if it's newsletter subscribers, people won't read it. instead, create ...
Read more