We've developed a large amount of content on various pages and organizing it to reduce clutter meant we wanted to use tabs. Unfortunately our initial attempts at using JavaScript based tabs failed over time as something in the way Rock loads pages would cause the page to reload with every tab click, resetting the tab you wanted to see back to the first tab in the list. With that, I set out to build JavaScript free tabs... Tabs entirely based on HTML and CSS with a little help from the underlying bootstrap system that Rock uses.

So how can this be done? It's fairly straightforward. Let's build a basic 3 tab set.

1) Navigate to the page you want to build a tab set on. Hover at the bottom to get the toolbar and click on "Page Zones".

2) Edit the zone you want to use to put your tabs into.

3) We need to add 5 blocks here. The first is our actual tab navigation menu which we'll call "Tab Navigation Set" (you can name it whatever you want) and it is a basic HTML block. The second is a placeholder block we'll call "Choose" and the other three blocks are our tabs we'll call "Alpha" "Bravo" and "Charlie" for this example. Name them as you see fit. All of these blocks are simple HTML blocks.

4) Now that we have the blocks, hover over the bottom to get the toolbar again and choose "Block Configuration".

5) Edit the HTML of the first "Tab Navigation Set" and we're going to paste in code so it looks like this:

<section class="panel panel-persondetails" style="margin-bottom: 0; margin-bottom: none;">
<div class="panel-heading rollover-container clearfix">
    <h3 class="panel-title pull-left"><i class="fa fa-list"></i>Instructions</h3>
</div>
<ul class="nav nav-pills RockTabs" id="InstructionTabs" role="tablist">
  <li class="nav-item" role="presentation"><a class="nav-link" id="choose-tab" data-toggle="tab" href="#choose" role="tab" style="display: none;">Choose</a></li>
  <li class="nav-item" role="presentation"><a class="nav-link" id="alpha-tab" data-toggle="tab" href="#alpha" role="tab">AlphaName</a></li>
  <li class="nav-item" role="presentation"><a class="nav-link" id="bravo-tab" data-toggle="tab" href="#bravo" role="tab">BravoName</a></li>
  <li class="nav-item" role="presentation"><a class="nav-link" id="charlie-tab" data-toggle="tab" href="#charlie" role="tab">CharlieName</a></li>
</ul>
</section>

In this you see the visible tab names of "AlphaName" and such, those can be whatever you want. The other places in the code where you see alpha or bravo, you'll need to be consistent in changing those with later steps as well or the system won't work... So anywhere you replace "alpha" with "Gramps-Bean-Recipe" you'll need to do that everywhere. Also... keep it simple... "beans" will suffice... and no spaces or punctuation in link areas, only on the name area itself (AlphaName, BravoName, etc) can contain such things. Also, feel free to rename "Instructions" in the H3 tag to be whatever this particular set of tabs is used for.

6) Go back to your Block Configuration on the bottom toolbar if needed and choose to edit "Block Properties" of the "Tab Navigation Set" we just put content into.

7) Choose the "Advanced Settings" tab and paste in the following Pre-HTML:

Note: The copy/paste here has additional code not shown in the image above. It has been updated to work in Rock v13+.

<style>
    .tab-pane { display: none; } /* hide all tabs by default */
    .active { display: block; } /* show the active tab only */
    .RockTabs > li > a, .RockTabs > li > a { background-color: #fff; } /* give tabs a white background (needed in v13+) */
    .RockTabs > li > a:hover, .RockTabs > li > a:focus { background-color: #ddd; } /* tab hover color (needed in v13+) */
    .nav-pills > li + li { margin-left: 2px !important; } /* reduce space between tabs from 12px to 2px (needed in v13+) */
</style>

Depending on your needs, you may also want to hide the subtitle in a tab, increase the height of the subtitle bar where the view buttons exist, limit font size of sub-cards on tabs, or even limit widths of tabs... You can add these optional CSS lines to the above step to see if they work for your needs:

	.active > div > div > div> .panel-block > .panel-heading > .panel-title { display: none; } /* hide tab sub-title text */
    .active > div > div > div> .panel-block > .panel-heading { background: #fdfdfd; padding: 10px 20px; } /* style tab sub-title bar where view buttons are shown */
    .step-card .step-name { font-size: 18px; } /* limit card title text size */
	.col-steps { max-width: 200px; } /* limit card widths */
	

8) Edit the HTML of the next block we added ("Choose") as this will be our placeholder people initially see when viewing the page. Here you can enter any message or content you want to inform the user. We're going to paste in some code that adds some space above/below our text, makes the text larger, and centers our instructions to "choose an area above" as follows:

<p style="font-size: 1.4em; text-align: center; padding: 20px;">choose an area above</p>

9) Now edit the "Block Properties" of that "Choose" block and insert the following into the Pre-HTML and Post-HTML fields as follows. This formats the content into a nice box to look consistent with the site design.

<div class="tab-pane active" role="tabpanel">
    <div class="panel panel-body panel-persondetails" style="display: block; margin-bottom: 24px;">

    </div>
</div>

10) Finally we need to insert the rest of our tab content and link them to the tab navigation. Click back on the "Block Configuration" on the bottom toolbar if needed, and Edit the HTML of the "Alpha" block. Put whatever content you want to use in that tab here. For our demo we'll just put in "...Your Alpha Tab content here".

11) And we need to identify the content in that block for the tab chooser (so here is where you need to make sure your names match any changes you made in step 5), and format the content into a nice box to look consistent with the site design. So let's paste the following into the Pre-HTML and Post-HTML fields of the "Alpha" block by going to the "Advanced Settings" tab of that block's "Block Properties" section.

<div class="tab-pane" role="tabpanel" id="alpha">
    <div class="panel panel-body panel-persondetails" style="display: block; margin-bottom: 24px;">

    </div>
</div>

12) Repeat steps 10-11 for any other tabs you have created (such as Bravo and Charlie) and be sure to replace the "id" of step 11 to match the href="idhere" of step 5 for each tab or the tabs won't work properly. Once complete, refresh the page so the code can all take effect, and you should have a nice functional set of tabs.