jQuery показывает первые X элементов со ссылками «Больше» и «Меньше»

Я пытаюсь найти решение jQuery для отображения первых 3 элементов в каждом меню в левом навигационном фильтре со ссылками «Показать больше» и «Показать меньше», позволяющими пользователям расширять список .

Я искал решение, но большинство сценариев развертывания/свертывания полностью скрывают слой, в то время как другие показывают ссылку Развернуть (Показать больше), но не переключаются, чтобы показать ссылку Свернуть (Показать меньше).

Мои меню закодированы следующим образом.

<div id="menu1">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
<div id="menu2">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>