Show/hide div Javascript error

Question

I need help with this fiddle. The workflow:

1. Select civil status
2. If select value = 1, show hidden div with 2 radio buttons.
3. If answer is yes, show 2nd hidden div with 2 radio buttons.
4. If answer is yes, show 3rd hidden div with text input field.
5. After input is filled out, show hidden Next button.
6. If select value was 0, answer no, 2nd answer no, show hidden Next button.

The code works for me on my local save till the last radiobutton, but when I select no there, the Next button doesn't show.

Can you please help to fix my code?

function showDiv(elem) {
  switch (elem.value) {
    case '1':
      document.getElementById('questionHIDDEN').style.display = 'block';
      document.getElementById('employedHIDDEN').style.display = 'none';
      document.getElementById('numberinputHIDDEN').style.display = 'none';
      document.getElementById('stepsHIDDEN').style.display = 'none';
      break;
    case '0':
      document.getElementById('stepsHIDDEN').style.display = 'block';
      break;
  }
};

$(document).ready(function() {

  $('input[name="employed"]').click(function() {
    if ($(this).attr("value") == "no") {
      $("#stepsHIDDEN").show();
      $("#employedHIDDEN").hide();
      $("#numberinputHIDDEN").hide();
    } else if ($(this).attr("value") == "yes") {
      $("#employedHIDDEN").show();
      $("#stepsHIDDEN").hide();
    } else {
      $("#stepsHIDDEN").hide();
    }
  });

  $('input[name="epworking"]').click(function() {
    if ($(this).attr("value") == "no") {
      $("#stepsHIDDEN").show();
      $("#numberinputHIDDEN").hide();
    } else
      $("#numberinputHIDDEN").show();
    $("#stepsHIDDEN").hide();
  });

  $('input[name=fname]').keyup(function() {
    if ($(this).val().length == 6) {
      $('#stepsHIDDEN').show();
    } else
      $('#stepsHIDDEN').hide();
  });

});

#questionHIDDEN,
#employedHIDDEN,
#numberinputHIDDEN,
#stepsHIDDEN {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
  <div id="content">
    <div id="text">
      <h4>2/3 Civil Status</h4> What is your civil status?
      <br>
      <br>
      <select name="status" id="soflow2" onchange="showDiv(this)">
        <option>Select</option>
        <option value="0">Single</option>
        <option value="1">Married</option>
        <option value="1">Registered Legal Partnership</option>
        <option value="1">Remarried</option>
        <option value="0">Legally Separated</option>
        <option value="0">Divorced</option>
        <option value="0">Widowed</option>
        <option value="1">Informal Partnership</option>
      </select>
      <div id="spouse">
        <table id="questionHIDDEN">
          <tr>
            <td>
              Is your spouse/legal partner employed?
            </td>
          </tr>

          <tr>
            <td class="left">
              <form>
                <span class="radiobutton"><input type="radio" name="employed" value="yes"> Yes </span>
                <span class="radiobutton"><input type="radio" name="employed" value="no"> No </span>
              </form>
            </td>
          </tr>
        </table>

        <table id="employedHIDDEN">
          <tr>
            <td>
              Is your spouse/legal partner working in our institution?
            </td>
          </tr>

          <tr>
            <td class="left">
              <form>
                <span class="radiobutton"><input type="radio" name="epworking" value="yes"> Yes </span>
                <span class="radiobutton"><input type="radio" name="epworking" value="no"> No </span>
              </form>
            </td>
          </tr>
        </table>

        <table id="numberinputHIDDEN">
          <tr>
            <td>
              <span>His/her personal number: <input class="personnelnumber" type="text" name="fname"> <i class="fa fa-info-circle tooltip" aria-hidden="true"><span class="tooltiptext">A 6 digit number, you can find it on an offical document.</span>
              </i>
              </span>
              <td>
          </tr>
        </table>
      </div>
    </div>
    <div id="stepsHIDDEN">
      <button onclick="window.location='03Children.html'" class="nextstep">Next</button>
    </div>
  </div>

</main>

https://jsfiddle.net/pLv4uams/

Answer 1

The problem is with your $('input[name="epworking"]') - click event. In the else part you did not enclose the lines with {} and hence else was taking up only one line of execution. $("#stepsHIDDEN").hide(); would execute at any cost on that event. So even when you showed it, the later part was hiding it. Below is the fix.

$('input[name="epworking"]').click(function() {
   if ($(this).attr("value") == "no") {
     $("#stepsHIDDEN").show();
     $("#numberinputHIDDEN").hide();
   } else {
     $("#numberinputHIDDEN").show();
     $("#stepsHIDDEN").hide();
   }
});

DEMO