pure CSS, Widget with changing text

Question

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

UPD: My HTML looks like this:

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

Answer 1

I dont really recomend you to do that, except you are welling to invest some time testing accessibility. But it is a fun exercise.

I try to create a code you can use in different places, so the ids are not important in the selector, but the position. I try to use the selector nth-of-type and siblings

.jokes li {
  display: none;
}

input:nth-of-type(1):checked ~ .jokes li:nth-of-type(1),
input:nth-of-type(2):checked ~ .jokes li:nth-of-type(2),
input:nth-of-type(3):checked ~ .jokes li:nth-of-type(3),
input:nth-of-type(4):checked ~ .jokes li:nth-of-type(4) {
  display: block;
}

<input type="radio" id="joke1" name="jokes" checked>
<label for="joke1">Joke 1</label><br>


<input type="radio"  id="joke2"  name="jokes">
<label for="joke2">Joke 2</label><br>

<input type="radio" id="joke3"  name="jokes">
<label for="joke3">Joke 3</label><br>

<input type="radio" id="joke4" name="jokes">
<label for="joke4">Joke 4</label><br>




   <ul class="jokes">
<li>
  Joke 1
</li>
<li>
  Joke 2
</li>
<li>
  Joke 3
</li>
<li>
  Joke 4
</li>
   </ul>

But if you are looking for a cool way to implement this, I create a codepen with an example using :target

https://codepen.io/luarmr/pen/pobmdLm

Answer 2

Pure CSS solution;

.article__text,
label {
  display: none
}

label {
  cursor: pointer
}

input#switch-humor-1:checked~.article__text.humor-1,
input#switch-humor-1:checked~label[for="switch-humor-2"],
input#switch-humor-2:checked~.article__text.humor-2,
input#switch-humor-2:checked~label[for="switch-humor-3"],
input#switch-humor-3:checked~.article__text.humor-3,
input#switch-humor-3:checked~label[for="switch-humor-4"],
input#switch-humor-4:checked~.article__text.humor-4,
input#switch-humor-4:checked~label[for="switch-humor-5"],
input#switch-humor-5:checked~.article__text.humor-5,
input#switch-humor-5:checked~label[for="switch-humor-1"] {
  display: block;
}

.article__title {
  font-size: 1.5rem;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<p class="article__title">Jokes</p>

<input type="radio" name="sw" id="switch-humor-1" hidden checked />
<input type="radio" name="sw" id="switch-humor-2" hidden />
<input type="radio" name="sw" id="switch-humor-3" hidden />
<input type="radio" name="sw" id="switch-humor-4" hidden />
<input type="radio" name="sw" id="switch-humor-5" hidden />

<p class="article__text humor-1">
  Joke 1
</p>
<p class="article__text humor-2">
  Joke 2
</p>
<p class="article__text humor-3">
  Joke 3
</p>
<p class="article__text humor-4">
  Joke 4
</p>
<p class="article__text humor-5">
  Joke 5
</p>

<label for="switch-humor-1"><i class="fas fa-redo"></i> Reload</label>
<label for="switch-humor-2"><i class="fas fa-redo"></i> Reload</label>
<label for="switch-humor-3"><i class="fas fa-redo"></i> Reload</label>
<label for="switch-humor-4"><i class="fas fa-redo"></i> Reload</label>
<label for="switch-humor-5"><i class="fas fa-redo"></i> Reload</label>

Goodluck with.