I have a table where every second table row has a class name of "hideme". In my css file I have made 

```
.hideme { display:none}

```

The hidden row contains a password field and a button. Only a single hidden row can be shown at any given time. As it is now the jquery code that makes the toggle function works pretty well. However it won't let me click inside the hidden row, without closing it, making it impossible to type anything in the text field.

How should I change my jquery code to allow clicking inside the hidden rows without anything happening?

My jquery code is as 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 a fiddle of how the code is currently working here: <http://jsfiddle.net/aTN6v/>