pure CSS, Widget with changing text

I have to do a widget with jokes on it. Only one joke should be displayed, and there is a button "Change" which changes the joke text to the next.

It should contain about ~10 jokes and look like this: widget layout

I know how to do it using JS, but the point is to implement such widget with pure CSS.

I think the solution will be connected with <input type="radio" /> and selectors :checked, :nth-child, but I don't know how to put it together