title: Display a div onclick on a radio buttons in jQuery
body: <p>I've few radio buttons and checkboxes which controls a sub layer div.</p>
  <p>Problem is when user activate an answer with a sub answer, and after the user selects another radio button, it hides the sub level opened few seconds ago.</p>
  <p>How can I solve this issue please ?</p>
  <p>Steps to reproduce the issue:</p>
  <ol>
  <li><p>Select the Answer 1.</p>
  </li>
  <li><p>Then the Answer A in the sub level.</p>
  </li>
  <li><p>Then sub level will be hidden whereas it should not.</p>
  </li>
  </ol>
  <hr />
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.form-group &gt; label').find('&gt; input:checkbox, &gt; input:radio').on('change', function () {
      if (!$(this).closest('.row').hasClass('sub-question')) {
          el = $(this).closest('.form-group').find('.sub-question');
          if (el.length &gt; 0 &amp;&amp; $(this).is(':checked')) { el.css('display', 'block'); }
          else {
              if ($(this).attr('type') == 'radio') {
                  $(this).closest('.group-container').find('.sub-question').hide();
              }
              else {
                  $(this).closest('.form-group').find('.sub-question').css('display', 'none');
              }
              $(this).closest('.form-group').find('.sub-question :input[type="radio"], .sub-question :input[type="checkbox"]').each(function (index) {
                  $(this).prop('checked', false);
              });
          }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sub-question {
      display: none;
      background: grey;
  }
  .tab:not(:first-child) {
      display: none;
  }
  
  .col-4 {
      width: 25% !important;
  }
  
  .col-6 {
      width: 50% !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-6 col-lg-6 col-xl-6 p-0 bg-cover gray-light-bg"&gt;
      &lt;div id="estimator" class="spacer pb-5 col-12 position-relative"&gt;
          &lt;form id="estimator-form" action=""&gt;
              &lt;div data-step="1" class="tab"&gt;
                  &lt;div class="group-container"&gt;
                      &lt;h3&gt;Question 1&lt;/h3&gt;
                      &lt;div class="form-group form-group-outer"&gt;
                          &lt;label class="container_check"&gt;Answer 1
                              &lt;input type="checkbox" name="q3[]" value="1"&gt;
                              &lt;span class="checkmark"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;div class="row sub-question"&gt;
                              &lt;h3 class="col-12"&gt;Sub answers&lt;/h3&gt;
                              &lt;div class="row"&gt;    
                                  &lt;div class="form-group col-6"&gt;
                                      &lt;label class="container_radio"&gt;Answer A
                                          &lt;input type="radio" name="q3_1[]"&gt;
                                          &lt;span class="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-6"&gt;
                                      &lt;label class="container_radio"&gt;Answer B
                                          &lt;input type="radio" name="q3_1[]"&gt;
                                          &lt;span class="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group form-group-outer"&gt;
                          &lt;label class="container_check"&gt;Answer 2
                              &lt;input type="checkbox" name="q3[]" value="2"&gt;
                              &lt;span class="checkmark"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;div class="row sub-question"&gt;
                              &lt;h3 class="col-12"&gt;Sub answers&lt;/h3&gt;
                              &lt;div class="row"&gt; 
                                  &lt;div class="form-group col-4"&gt;
                                      &lt;label class="container_check"&gt;Answer A
                                          &lt;input type="checkbox" name="q3_2[]" value="1"&gt;
                                          &lt;span class="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-4"&gt;
                                      &lt;label class="container_check"&gt;Answer B
                                          &lt;input type="checkbox" name="q3_2[]" value="2"&gt;
                                          &lt;span class="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group col-4"&gt;
                                      &lt;label class="container_check"&gt;Answer C
                                          &lt;input type="checkbox" name="q3_2[]" value="3"&gt;
                                          &lt;span class="checkmark"&gt;&lt;/span&gt;
                                      &lt;/label&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="container_check"&gt;Answer 3
                              &lt;input type="checkbox" name="q3[]" value="3"&gt;
                              &lt;span class="checkmark"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="container_check"&gt;Answer 4
                              &lt;input type="checkbox" name="q3[]" value="4"&gt;
                              &lt;span class="checkmark"&gt;&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>