Is it possible to hide overflow items/a maximum of items and show it with a checkbox?

pretty new to frontend-development so I'm gonna try to ask this question as clearly as I can. Let me know if it doesn't make sense or needs clarification (english is not my first language).

So, here is what I want to do:

I have a ul-list of about 40 li each containing a button. They are positioned with css grid with "grid-template-columns: repeat(6, 1fr);"

I also have a checkbox and a label which I have used to experiment some with the css. My question is if it is possible to originally show only the first row of li/buttons (6 li/buttons) and hide the rest, and then show the entire list when checking the checkbox.

I hope the question makes sense, otherwise; let me know. Thank you in advance!