Block with changing content by button, pure CSS

I need to do a block with some text content on it, for example, some jokes. Only one joke should be displayed, and there is a button which changes the joke to the next. It should contain about 5 jokes and look like this

I think it's pretty easy to do using JS, but I have to implement it with only CSS. As a hint, this solution should be connected with and selectors :checked, :nth-child, but I don't know how to put it together

If you need my HTML:

<p class="article__title">Jokes</p>
<p class="article__text humor-1">
  Joke 1
</p>
<p class="article__text humor-2">
  Joke 2
</p>