Databases
StackOverflow2013
Postsdbo
POMaking child contenet appear/dissapear in according the state change of a radio button
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking child contenet appear/dissapear in according the state change of a radio button
    text
    copied!<p>This is a continues question of <strong><a href="https://stackoverflow.com/questions/17920642/change-the-background-colour-and-hide-the-radio-buttons-within-a-particular-divs">this one</a></strong>. The earlier question was on check box. But then I changed the check box into radio buttons according to the requirements. </p> <p>Now I need to show the child radio buttons and change the background colour when a mother radio button is in active state. Once it changes to inactive state I need to hide the child radio buttons and change the background colour to white as well.</p> <p><strong>Here is my <a href="http://jsfiddle.net/murshid1988/5c9ar/2/" rel="nofollow noreferrer">JSFIDDLE</a> and the HTML code,</strong></p> <p><strong>PS: Don't mind the class names.</strong></p> <pre><code> &lt;div class="newsletter-box unchecked"&gt; &lt;span class="newsletter-checkbox-wrapper"&gt; &lt;input id="bonus-credit-checkbox" name="newsletter-checkbox" type="radio" value="" /&gt; &lt;label for="bonus-credit-checkbox"&gt;Your bonus credits&lt;/label&gt; &lt;span class="bonus-credit-description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis &lt;/span&gt; &lt;/span&gt; &lt;span class="newsletter-preference"&gt; &lt;span class="newsletter-preference-text"&gt;I prefer for: &lt;/span&gt; &lt;span class="gender-radio"&gt; &lt;input checked id="newsletter-female" name="newsletter-gender" type="radio"&gt; &lt;label for="newsletter-female"&gt;Women&lt;/label&gt; &lt;/span&gt; &lt;span class="gender-radio"&gt; &lt;input id="newsletter-male" name="newsletter-gender" type="radio"&gt; &lt;label for="newsletter-male"&gt;Men&lt;/label&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; &lt;div class="newsletter-box-daily unchecked"&gt; &lt;span class="newsletter-checkbox-wrapper"&gt; &lt;input id="daily-checkbox" name="newsletter-checkbox" type="radio" value=""&gt; &lt;label for="daily-checkbox"&gt;Offers of the day&lt;/label&gt; &lt;span class="daily-description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque &lt;/span&gt; &lt;/span&gt; &lt;span class="newsletter-preference"&gt; &lt;span class="newsletter-preference-text"&gt;I prefer for: &lt;/span&gt; &lt;span class="gender-radio"&gt; &lt;input checked id="newsletter-female-daily" name="newsletter-gender-daily" type="radio"&gt; &lt;label for="newsletter-female-daily"&gt;Women&lt;/label&gt; &lt;/span&gt; &lt;span class="gender-radio"&gt; &lt;input id="newsletter-male-daily" name="newsletter-gender-daily" type="radio"&gt; &lt;label for="newsletter-male-daily"&gt;Men&lt;/label&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload