DNNGo demo dnn skin unlimited color pack 024 -1 > Features

You are Here : >

Togglable tabs

tabs-top

Content text 1 ...

Content text 2 ...

Content text 3 ...

Content text 4 ...

<div class="tabs-top">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#item1" data-toggle="tab">Home</a></li>
    <li><a href="#item2" data-toggle="tab">Profile</a></li>
    <li><a href="#item3" data-toggle="tab">Messages</a></li>
    <li><a href="#item4" data-toggle="tab">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="item1">Content text 1 ...</div>
    <div class="tab-pane fade" id="item2">Content text 2 ...</div>
    <div class="tab-pane fade" id="item3">Content text 3 ...</div>
    <div class="tab-pane fade" id="item4">Content text 4 ...</div>
  </div>
</div>

tabs-left

Content text 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content text 2

Content text 3

Content text 4

<div class="tabs-left">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tabs-left-item1" data-toggle="tab">Home</a></li>
    <li><a href="#tabs-left-item2" data-toggle="tab">Profile</a></li>
    <li><a href="#tabs-left-item3" data-toggle="tab">Messages</a></li>
    <li><a href="#tabs-left-item4" data-toggle="tab">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tabs-left-item1">Content text 1 ...</div>
    <div class="tab-pane fade" id="tabs-left-item2">Content text 2 ...</div>
    <div class="tab-pane fade" id="tabs-left-item3">Content text 3 ...</div>
    <div class="tab-pane fade" id="tabs-left-item4">Content text 4 ...</div>
  </div>
</div>

tabs-right

Content text 1

Content text 2

Content text 3

Content text 4

<div class="tabs-right">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tabs-right-item1" data-toggle="tab">Home</a></li>
    <li><a href="#tabs-right-item2" data-toggle="tab">Profile</a></li>
    <li><a href="#tabs-right-item3" data-toggle="tab">Messages</a></li>
    <li><a href="#tabs-right-item4" data-toggle="tab">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in active" id="tabs-right-item1">Content text 1 ...</div>
    <div class="tab-pane fade" id="tabs-right-item2">Content text 2 ...</div>
    <div class="tab-pane fade" id="tabs-right-item3">Content text 3 ...</div>
    <div class="tab-pane fade" id="tabs-right-item4">Content text 4 ...</div>
  </div>
</div>

Top Color:

Main Color:

Bottom Color: