[Konstantine]

Есть готовое решение, но оно не работает. проблема в javascript. Не работает функция, выдаёт ошибку: TypeError: $ is not a function

Нужно спрятать все элементы списков, что бы остались названия списков. Трудность заключается в том, что все списки создаются динамически, и я не могу каждому ul задать свой стиль.

.catcol ul li.catitem{
    display:none;
}
.catcol ul li.maincat{
    display:block;
}

<div class="catcol">
<ul><li class="maincat">Название списка 2</li> 
<li class="catitem">1 элемент списка</li>
<li class="catitem">2 элемент списка</li>
<li class="catitem">3 элемент списка</li>
</ul>
 
<ul><li class="maincat">Название списка 2</li> 
<li class="catitem">1 элемент списка</li>
<li class="catitem">2 элемент списка</li>
<li class="catitem">3 элемент списка</li>
</ul>
 
<ul><li class="maincat">Название списка 3</li> 
<li class="catitem">1 элемент списка</li>
<li class="catitem">2 элемент списка</li>
<li class="catitem">3 элемент списка</li>
</ul>
<div>

$('.catcol ul li.maincat').hover(function(){
    
        $('.catcol ul li.catitem').hide();
        $(this).parent('ul').children('li.catitem').show();
        
        return false;
    });

Думаю тут всё просто, но я не могу быть спецом во всех вопросах