title: Pure CSS tab using <a> as button
body: <p>How do I do this? I want to change the content in my content area when a specific <code>&lt;a&gt;</code> tag is clicked. I am only limited to use HTML and CSS.</p>
  
  <p>So far here are my codes:
  HTML</p>
  
  <pre><code>&lt;div class="content2"&gt;
      &lt;div class="tabs-content"&gt; 
          &lt;p&gt;Come in and experience...&lt;/p&gt;
          &lt;img id="imagecoffee" src="coffee.jpg" alt="Coffee Image"&gt;
          &lt;ul&gt;
              &lt;li&gt;Specialty Coffee and Tea&lt;/li&gt;
              &lt;li&gt;Freshly made sandwiches&lt;/li&gt;
              &lt;li&gt;Bagels, Muffins, and Organic Snacks&lt;/li&gt;
              &lt;li&gt;Music and Poetry Readings&lt;/li&gt;
              &lt;li&gt;Open mic nights &lt;/li&gt;
              &lt;li&gt;...&lt;/li&gt;
          &lt;/ul&gt;
          &lt;p&gt;23 Pine Road &lt;br&gt; Nottingham, NG1 5YU &lt;br&gt;0115 9324567 &lt;br&gt; &lt;br&gt; &lt;/p&gt;        
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .content2 .tabs-content{
      display:none;
   }
  
  
  
  .nav nav a:active ~ .tabs-content{
      display:block;
  }
  </code></pre>