title: How to make UL Tabs with only HTML CSS
body: <p>Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens. </p>
  
  <p>Here's my HTML</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
        ul.tabs {
            display: table;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
  
        ul.tabs&gt;li {
            float: left;
            padding: 10px;
            background-color: lightgray;
        }
  
        ul.tabs&gt;li:hover {
            background-color: lightgray;
        }
  
        ul.tabs&gt;li.selected {
            background-color: lightgray;
        }
  
        div.content {
            border: 1px solid black;
        }
  
        ul { overflow: auto; }
  
        div.content { clear: both; }
      &lt;/style&gt;
  &lt;body&gt;
      &lt;ul class="tabs"&gt;
          &lt;li&gt;&lt;a href="#tab1"&gt;Description&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Specs&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="pane"&gt;
          &lt;div class="tab1"&gt;
              &lt;div&gt;&lt;h2&gt;Hello&lt;/h2&gt;&lt;/div&gt;
          &lt;div /&gt;
          &lt;div&gt;Hello hello hello.&lt;/div&gt;
          &lt;div /&gt;
          &lt;div&gt;Goodbye goodbye, goodbye&lt;/div&gt;
          &lt;div /&gt;
          &lt;div /&gt;
  
          &lt;/div&gt;
          &lt;div class="tab2" style="display:none;"&gt;
          &lt;div&gt;&lt;h2&gt;Hello2&lt;/h2&gt;&lt;/div&gt;
          &lt;div /&gt;
          &lt;div&gt;Hello2 hello2 hello2.&lt;/div&gt;
          &lt;div /&gt;
          &lt;div&gt;Goodbye2 goodbye2, goodbye2&lt;/div&gt;
          &lt;div /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          This should really appear on a new line.
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>