JS, jquery скрытие и отображение строк в таблице в HTML коде
 

К сожалению не силен в JS от слова вообще, но есть необходимость скрывать и отображать дополнительные строки в таблице
есть кусок кода, который скрывает и показывает строки, НО, при загрузке страницу раскрытие списков происходит только со второго клика по строке.
как решить данную беду? чтобы с первого клика и открывал и закрывал строки.


$(function()
{
var headerLevel = $('.header-level'),
subLevel = $('.sub-level');

$('.sub-level table').hide();



headerLevel.click(function()
{
var thisTable = $(this).next('.sub-level').children('td').children('table');

if(thisTable.hasClass('table-open'))
{
thisTable.removeClass('table-open').show();
}
else
{
thisTable.addClass('table-open').hide();
}
}
);
}
);