title: Show and Hide div element with pure CSS and HTML on click
body: <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>