Show and Hide div element with pure CSS and HTML on click
<p>I'd like to create a program where in:
* When you click Span 1, Span 2 will be displayed and Span 1 will be disabled.
* When you click Span 2, Span 1 will be displayed and Span 2 will be disabled.</p>

<p>This is my codes and I think it's strange. Your help is greatly appreciated.</p>

<p>CSS</p>

<pre><code>body {
  display: block;
}
.span1:focus ~ .span2 {
  display: none;
}
.span2:focus ~ .span1 {
  display: block;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;span class="span1" tabindex="0"&gt;Span 1&lt;/span&gt;
&lt;span class="span2" tabindex="0"&gt;Span 2&lt;/span&gt;
</code></pre>