Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.</p> <pre><code>var shows_6 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected == 'Groom') { $("#s_6").slideDown(); } else { $("#s_6").slideUp(); } }; $('#q_7 input').ready(shows_6); var shows_7 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected == 'Bride') { $("#s_7").slideDown(); } else { $("#s_7").slideUp(); } }; $('#q_7 input').ready(shows_7); $(document).ready(function() { $('#q_7 input:radio').click(shows_6); $('#q_7 input:radio').click(shows_7); }); &lt;div id="q_7" class='question '&gt;&lt;label&gt;Who are you?&lt;/label&gt; &lt;p&gt; &lt;label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0"&gt;Bride&lt;/label&gt; &lt;input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1"&gt;Groom&lt;/label&gt; &lt;input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" /&gt; &lt;/p&gt; &lt;/div&gt; </code></pre> <p>The following allows us to make the question mandatory...</p> <pre><code>&lt;script type="text/javascript"&gt; var mandatory_q_7 = function() { var selected = $("#q_7 input:radio:checked").val(); if (selected != '') { $("#q_7").removeClass('error'); } }; $(document).ready(function() { $('#q_7 input:radio').click(function(){mandatory_q_7();}); }); &lt;/script&gt; </code></pre> <p>Here's an example of the actual show / hide layer</p> <pre><code>&lt;div class="section" id="s_6"&gt; &lt;h2&gt;Attire&lt;/h2&gt; ... &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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