title: Cannot hide neighboring radio buttons
body: <p>I'm using only HTML and CSS without JavaScript. Initially the code should only show first radio button with it label, if user clicks on it, the second radio button and second label should appear and the first should disappear etc. I have no idea how to achieve this result. I suppose that the problem is in the location of tags. I don't know how to write css styles to do this task. Could you tell me how to solve this problem? The code:</p>
  <pre><code>&lt;div&gt;
      &lt;label for=&quot;radio-1&quot; class=&quot;label-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;radio-1&quot; name=&quot;group&quot;&gt; &lt;/label&gt;
      &lt;label for=&quot;radio-2&quot; class=&quot;label-2&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;radio-2&quot; name=&quot;group&quot;&gt; &lt;/label&gt;
      &lt;label for=&quot;radio-3&quot; class=&quot;label-3&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;radio-3&quot; name=&quot;group&quot;&gt; &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>