Hide different divs with different ratio checked

Question

Got this code in the following question Hi! How can I transform this code to be "universal". For now it will only work for one case. If i have two it will not work.

Thank you

$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'watch-me') {
            $('#show-me').show();           
       }
       else {
            $('#show-me').hide();   
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
  <label>Are you a member?</label>
</div>
<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div id="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

Answer 1

You have to set a common class and do dom traversal with respect to the selected radio button.

---

Things to be noted:

1. Use change event instead of click event for radio button.
2. Use the value to detect the radio button instead of sniffing its id.

$(document).ready(function() {
   $('input[type="radio"]').change(function() {
      $(this).closest('fieldset').find('.show-me').toggle(this.value == "yes");           
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
  <label>Are you a member?</label>
</div>
<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>