My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to achieve this effect and suspect that the issue lies in the structure of the tags. Creating the necessary CSS styles for this task is also perplexing to me. Can you provide guidance on how to solve this problem? Here is the code snippet:
<div>
<label for="radio-1" class="label-1"> <input type="radio" id="radio-1" name="group"> </label>
<label for="radio-2" class="label-2"> <input type="radio" id="radio-2" name="group"> </label>
<label for="radio-3" class="label-3"> <input type="radio" id="radio-3" name="group"> </label>
</div>