JavaScript-less Tabset

An example of CSS-only dynamic tabset.

HTML

<div class="tabset">
  <div class="tabs-container">
    <ul>
      <li><label for="tab-one">Tab One</label></li>
      <li><label for="tab-two">Tab Two</label></li>
      <li><label for="tab-three">Tab Three</label></li>
    </ul>
  </div>
  <div class="tab-content-container">
    <!-- first radio button checked by default -->
    <input type="radio" id="tab-one" class="tab-toggle-radio" name="tabs-radios" checked />
    <div class="tab-content">
          <button type="button" ng-click="AddClick1();">Tab1 Click</button>
    </div>
    <input type="radio" id="tab-two" class="tab-toggle-radio" name="tabs-radios" />
    <div class="tab-content">
      Tab <strong>Two</strong> Content Here
    </div>
    <input type="radio" id="tab-three" class="tab-toggle-radio" name="tabs-radios" />
    <div class="tab-content">
      Tab <strong>Three</strong> Content Here
    </div>
  </div>
</div>

CSS

/* For demo purposes only */
* { margin: 0; padding: 0; }
.tabset {
    background: #eee;
    padding: 1em;
}
.tabs-container li {
    display: inline-block;
}
.tabs-container li label {
    background: #fff;
    border: solid #ccc 1px;
    border-width: 1px 1px 0;
    cursor: pointer;
    display: block;
    padding: 0.5em 1em;
}
.tab-content,
.tab-toggle-radio {
    display: none;
}
.tab-content {
    background: #fff;
    border: solid #ccc 1px;
    padding: 0.5em 1em 10em;
}
/* Where the magic happens */
.tab-toggle-radio:checked + .tab-content {
    display: block;
}