css - Jquery toggle tablerow on/off -

i have table every second table row has class name of "hideme". in css file have made

.hideme { display:none} 

the hidden row contains password field , button. single hidden row can shown @ given time. jquery code makes toggle function works pretty well. won't let me click inside hidden row, without closing it, making impossible type in text field.

how should change jquery code allow clicking inside hidden rows without happening?

my jquery code follows:

$(document).ready(function() {     $('#eventtable tr').on('click', function() {         if ($(this).next().css('display') == 'none') {             $('#eventtable .hideme').hide();             $(this).next().toggle();         }         else {             $('#eventtable .hideme').hide();         }     }); }); 

you can see fiddle of how code working here: http://jsfiddle.net/atn6v/

try this:

$('#eventtable tr:not(.hideme)').on('click', function() { ... });