title: Nested Question Toggle using Radio Buttons
body: <p>I have a relatively straightforward nested question setup using radio buttons and JavaScript/jQuery which shows/hides extra information based on the button that you click (Yes to show, No to hide):</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>          &lt;div class="form-nest panel-question d-flex justify-content-start"&gt;
                &lt;span class="icon icon-primary icon-medium icon-roundel icon-vehicle align-self-start mr-2 mr-md-4"&gt;&lt;/span&gt;
                              &lt;div class="question-wrapper"&gt;
              &lt;h2 class="heading-epsilon"&gt;Are you interested in RAC Breakdown Cover for complete peace of mind?&lt;/h2&gt;
             &lt;!-- Yes/no Open--&gt;
            &lt;div class="form-row form-inline"&gt;
              &lt;div class="form-check form-check-inline"&gt;&lt;input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio5"&gt;&lt;label for="buttonRadio5"&gt;Yes&lt;/label&gt;&lt;/div&gt;
              &lt;div class="form-check form-check-inline"&gt;&lt;input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio6"&gt;&lt;label for="buttonRadio6"&gt;No&lt;/label&gt;&lt;/div&gt;
            &lt;/div&gt;
             &lt;!-- Yes/no closed --&gt;
  
              &lt;/div&gt;&lt;!--question-wrapper--&gt;
          &lt;/div&gt;&lt;!-- Form Nest Close--&gt;
          &lt;!--Nested container open --&gt;
            &lt;div class="nested-container"&gt;
              &lt;div id="buttonRadio5-nest" class="nested-content"&gt;
                &lt;ul class="list list-icons"&gt;
                &lt;li class="list-item list-icon list-icon-tick"&gt;Pays out regardless of whether the accident was fault or non-fault&lt;/li&gt;
                &lt;li class="list-item list-icon list-icon-tick"&gt;Covers named drivers and passengers&lt;/li&gt;
                &lt;li class="list-item list-icon list-icon-tick"&gt;Covers the policy holder when driving other vehicles if they don't own the vehicle&lt;/li&gt;
                &lt;/ul&gt;
              &lt;a href="#"&gt;View more product information&lt;/a&gt;
              &lt;p&gt;&lt;strong&gt;+ £40.00&lt;/strong&gt; per year&lt;/p&gt;
              &lt;div class="form-row form-inline"&gt;
                &lt;div class="form-check form-check-inline"&gt;&lt;input class="form-check-input form-check-input-button" type="checkbox" name="buttonCheckbox1" id="buttonCheckbox1"&gt;&lt;label for="buttonCheckbox1"&gt;Add&lt;/label&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;!-- Nested container closed --&gt;
  </code></pre>
  
  <p>And the JS/jQuery:</p>
  
  <pre><code>function nestedPanelHide(ele) {
    var eleId = "#" + ele,
        nestWrap = $(eleId).closest(".form-nest"),
        nestCont = nestWrap.next(".nested-container");
  
    nestCont.children().hide();
  }
  
  function nestedPanelShow(ele) {  
    var eleId = "#" + ele,
        nestWrap = $(eleId).closest(".form-nest"),
        nestCont = nestWrap.next(".nested-container"),
        eleNestId = eleId + "-nest",
        nestFields = nestCont.children(eleNestId);
  
    nestedPanelHide(ele);
    nestFields.show();
  }
  
  $(document).ready(function(){
  
    $(".nested-content").hide();
  
    // Find each form with nest class
    $(".form-nest").each(function( index ) {
  
      // Find nest conts
      var nest = $(this),
          nestCont = nest.next(".nested-container");
  
      // For each nest cont
      for (var i = 0; i &lt; nestCont.length; i++) {
  
        // Find nest opts in cont
        var nestOpt = nestCont[i].children;
  
        // For each nest opt add click event
        for (var j = 0; j &lt; nestOpt.length; j++) {
  
          // Get cont id, trim to form ele id
          var id = nestOpt[j].id,
              str = id.substr(0, id.lastIndexOf("-")),
              eleId = "#" + str;
  
          // Add class to ele to remove from later look up
          $(eleId).parent().addClass("nest-btn");
  
          // Add show event listener to ele
          $(eleId).on("click", function() {          
            var id = $(this).attr("id");
            nestedPanelShow(id);
          });
        }
      }
  
      // Find nest opts
      var nestOpts = nest.children();
  
      // For each nest opt
      for (var k = 0; k &lt; nestOpts.length; k++) {
  
        // Get this opt
        var opt = $(nestOpts[k]);
  
        // If opt does not have class nest-btn
        if (!opt.hasClass("nest-btn")) {
  
          // Add hide event listener to opt
          $(opt.children()).on("click", function() {          
            var id = $(this).attr("id");
            nestedPanelHide(id);
          });
        }
      }
    });
  });
  
  function nestedPanelHide(ele) {
    var eleId = "#" + ele,
        nestWrap = $(eleId).closest(".form-nest"),
        nestCont = nestWrap.next(".nested-container");
  
    nestCont.children().hide();
  }
  
  function nestedPanelShow(ele) {  
    var eleId = "#" + ele,
        nestWrap = $(eleId).closest(".form-nest"),
        nestCont = nestWrap.next(".nested-container"),
        eleNestId = eleId + "-nest",
        nestFields = nestCont.children(eleNestId);
  
    nestedPanelHide(ele);
    nestFields.show();
  }
  
  $(document).ready(function(){
  
    $(".nested-content").hide();
  
    // Find each form with nest class
    $(".form-nest").each(function( index ) {
  
      // Find nest conts
      var nest = $(this),
          nestCont = nest.next(".nested-container");
  
      // For each nest cont
      for (var i = 0; i &lt; nestCont.length; i++) {
  
        // Find nest opts in cont
        var nestOpt = nestCont[i].children;
  
        // For each nest opt add click event
        for (var j = 0; j &lt; nestOpt.length; j++) {
  
          // Get cont id, trim to form ele id
          var id = nestOpt[j].id,
              str = id.substr(0, id.lastIndexOf("-")),
              eleId = "#" + str;
  
          // Add class to ele to remove from later look up
          $(eleId).parent().addClass("nest-btn");
  
          // Add show event listener to ele
          $(eleId).on("click", function() {          
            var id = $(this).attr("id");
            nestedPanelShow(id);
          });
        }
      }
  
      // Find nest opts
      var nestOpts = nest.children();
  
      // For each nest opt
      for (var k = 0; k &lt; nestOpts.length; k++) {
  
        // Get this opt
        var opt = $(nestOpts[k]);
  
        // If opt does not have class nest-btn
        if (!opt.hasClass("nest-btn")) {
  
          // Add hide event listener to opt
          $(opt.children()).on("click", function() {          
            var id = $(this).attr("id");
            nestedPanelHide(id);
          });
        }
      }
    });
  });
  
  
  (function($) {
  
  $('.label-yes').click(function() {
      $(this).closest('.nested-content').addClass('open');
  });
  
  $('.label-no').click(function() {
      $(this).closest('.nested-content').removeClass('open');
  });
  
  })(jQuery);
  </code></pre>
  
  <p>I can get the extra information to display when you click on "yes" but I can't get it to hide again when you click "no". I've tried going over line-by-line to see if I can identify where my error might be. I feel like it's something simple, but I fear I may have gone a little code blind from staring at it too much.</p>
  
  <p>I have a JSfiddle here which shows you the basis of what I'm trying to achieve - I've stripped out the styling as it might give away who this is for (it's client work), but the basic functionality is there:</p>
  
  <p><a href="https://jsfiddle.net/3y4b25uk/" rel="nofollow noreferrer">https://jsfiddle.net/3y4b25uk/</a></p>
  
  <p>Any help or guidance that can be given would be greatly appreciated as I'm at the end of my tether trying to get it working and it's so nearly there.</p>
  
  <p>Thank you.</p>