CCS Drupal Guide
Search…
Tabs
image
Tabs organize content into meaningful sections, while occupying less screen space. Use tabs to give readers quick access to sections of a long document or page, such as profile pages.
To create tabs in your content: 1. Click the Source button on the editor toolbar
image
  1. 1.
    Copy and paste the following markup
  2. 2.
    Edit the number and description of the tabs to suit your content
image

Markup

1
<div>
2
<!-- Nav tabs -->
3
<ul class="nav nav-tabs" role="tablist">
4
<li role="presentation" class="active"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
5
<li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
6
<li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
7
<li role="presentation"><a href="#(addname)" aria-controls="(addname)" role="tab" data-toggle="tab">(Add Name)</a></li>
8
</ul>
9
<!-- Tab panes -->
10
<div class="tab-content">
11
<div role="tabpanel" class="tab-pane active" id="(addname)">(Add content)</div>
12
<div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
13
<div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
14
<div role="tabpanel" class="tab-pane" id="(addname)">(Add content)</div>
15
</div>
16
</div>
Copied!
Copy link
Contents
Markup