How do I show/hide a hidden - by default - table row with jQuery?

Question

I am trying to show/hide a table row that is hidden by default. Here is an snippet of what I am doing:

 function showHidePatientSupportedCont(val) { alert(val == '0'); if (val == '0') { $('#pattient_supported_cont').removeAttr('style').show(); } else { $('#pattient_supported_cont').hide(); } } $(document).ready(function() { $(".btn-0, .btn-1").click(function() { showHidePatientSupportedCont($(this).data('val')); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr id="patient_supported_cont" style="display: none"> <td> text text text </td> </tr> </table> <button data-val="0" class="btn-0">Click 0</button> <button data-val="1" class="btn-1">Click 1</button> 

But for some reason the row never gets displayed. I have read this post and I am doing exactly as in the accepted answer. What I am missing here?

PS: Here is a Fiddle for you to play as well

Answer 1

You have a typo in both of your identifiers:

  if (val == '0') {
    $('#pattient_supported_cont').removeAttr('style').show();
  } else {
    $('#pattient_supported_cont').hide();
  }

to:

  if (val == '0') {
    $('#patient_supported_cont').removeAttr('style').show();
  } else {
    $('#patient_supported_cont').hide();
  }

There is an extra 't' in 'patient' =)