Tabs

Last edited 12/16/2019
Tabs allow lots of information to fit compactly on a single page:

First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here. First Content Goes Here.
Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here. Second Content Goes Here.
Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here. Third Content Goes Here.
Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here. Forth Content Goes Here.

 

The code used to create tabs is fairly advanced. We are providing it here so councils may use it independently if they wish, but please reach out to us if you need any assistance.

Code:

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">HOME TAB CONTENT</div>
    <div role="tabpanel" class="tab-pane" id="profile">PROFILE TAB CONTENT</div>
    <div role="tabpanel" class="tab-pane" id="messages">MESSAGES TAB CONTENT</div>
    <div role="tabpanel" class="tab-pane" id="settings">SETTINGS TAB CONTENT</div>
  </div>

</div>

 

We are always happy to assist with website training.
Contact Tentaroo
Schedule a Training