title: Show/Hide contents by clicking an icon using CSS (no javascript)
body: <p>Is it possible to use something similar to toggle on/off or show/hide but rather than using panels or accordion menu, use icon-blocks instead?</p>
  
  <p>There are 4 icons arranged in a row, clicking each icon should display the  contents below the icon row, but only one content should be displayed at any given time. </p>
  
  <p>I'm looking for CSS/HTML solution only - no javascript. </p>
  
  <p>Icons are arranged in a row, using grid</p>
  
  <pre><code>&lt;!--display icons in a row, 4 columns--&gt;
  &lt;div class="quarter"&gt;   
      &lt;span class="icon1"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below the 4th 'quarter' div is where the contents should be displayed.</p>
  
  <p><strong>Edit: Final Code</strong>
  I replaced the position: absolute with float to display all the text below the icons. </p>
  
  <pre><code>.iconBlock{
      display: inline-block;  
      margin: 20px;
      padding: 0px 40px 15px 40px;
      cursor: pointer;
      outline: none !important;
      }
  
  .iconBlock a{
      font-size: 40px;
      color: #000;
      }
  
  .contentBlock {
      display: none;
      height: auto !important;
      opacity: 0;
      }
  
  .iconBlock:hover a{
       color: #444;
      }
  
  .iconBlock:focus a{
      color: #ff4455;
      }
  
  .iconBlock:focus + .contentBlock{
      opacity: 1;
      display: block;
      float: left;
      top: 0;
      left: 0;
      }
  </code></pre>