Javascript-форум - Трудность с реализацией выпадающих списков (HTML+CSS)

Есть готовое решение, но оно не работает. проблема в 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;
    });

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