Show top items (LI's) of UL's

Show top items (LI's) of UL's

Hello,

I have multiple ul with multiple actions on 'button' changes, i.e.:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>  <--this is to be hidden
</ul>
Show/Hide

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li> <--this is to be hidden
  <li></li> <--this is to be hidden
</ul>
Show/Hide

The UL's are to show top 3 items let's say, and hide the rest. When items are hidden on page load [top 3], the Show button is on. When that is clicked, it shows all LI's for that UL and button/link text changes to Hide, and hides all other items of all other items of other UL's apart from their top 3 items.

When the items show, and the text/image is changed to Hide, hide's on click should also hide that UL's items and only show three items for that UL. 3 items are always shown.

I hope I've explained this well, but please let me know if you need any mre explanations. I look forward to you help, it is greatly appreciated.

Many thanks,
Edon