Toggle Tab HTML

toggle-tab.html

<div id="sample-tab">
    <ul class="sample-Tab-nav" role="tablist">
      <li role="presentation">
        <button role="tab" aria-controls="panel1" aria-selected="true" tabindex="0">
          Tab 1
        </button>
      </li>
      <li role="presentation">
        <button role="tab" aria-controls="panel2" aria-selected="false" tabindex="-1">
          Tab 2
        </button>
      </li>
      <li role="presentation">
        <button role="tab" aria-controls="panel3" aria-selected="false" tabindex="-1">
          Tab 3
        </button>
      </li>
      <li role="presentation">
        <button role="tab" aria-controls="panel4" aria-selected="false" tabindex="-1">
          Tab 4
        </button>
      </li>
      <li role="presentation">
        <button role="tab" aria-controls="panel5" aria-selected="false" tabindex="-1">
          Tab 5
        </button>
      </li>
    </ul>
    <div id="panel1" role="tabpanel" aria-hidden="false" tabindex="0">
      <p>Panel1 Content</p>
    </div>
    <div id="panel2" role="tabpanel" aria-hidden="true" tabindex="0">
      <p>Panel2 Content</p>
    </div>
    <div id="panel3" role="tabpanel" aria-hidden="true" tabindex="0">
      <p>Panel3 Content</p>
    </div>
    <div id="panel4" role="tabpanel" aria-hidden="true" tabindex="0">
      <p>Panel4 Content</p>
    </div>
    <div id="panel5" role="tabpanel" aria-hidden="true" tabindex="0">
      <p>Panel5 Content</p>
    </div>
  </div>