Creating tabbed panels in Concrete CMS

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Feb 21, 2015
 See here for information regarding tabs in v9.

Instructions:

Step 1. Tabbed panels in forms use the concrete ui helper.
Core::make('helper/concrete/ui')

 note: \Core::make() is deprecated . Use app() (since 8.5.2) or \Concrete\Core\Support\Facade\Application::getFacadeApplication() . See this tutorial for more details.

Step 2. The concrete ui helper will use the tabs method.
Core::make('helper/concrete/ui')->tabs()

Step 3. The tabs() method takes an array of "tab info" arrays.
tabs($tabs, $jstabs=true, $callback= 'ccm_activateTabBar')
- the first value of a tab info array is the data-tab name used in the data-tab hook for JavaScript
- the second value of a tab info array is the displayed tab title used as the label for the tab
- the third value is a boolean that sets the initial active tab
Example: array('feed-details', t('Feed Details'), true)
- "feed-details" is the data-tab name
- "Feed Details" is the tab title
- "true" means this tab will be the initial active tab

Step 4. Each tab section is wrapped in an element with a specific id and class.
- the id is the data-tab name prefixed with ccm-tab-content-
- the class is ccm-tab-content
Example: a data-tab name of "settings"

<div id="ccm-tab-content-settings" class="ccm-tab-content">
    <!-- form content -->
</div>

Step 5. Place the desired form elements inside each tab section wrapper.

Example: a simple block form using tabbed panels

<?php defined('C5_EXECUTE') || die('Access Denied.');

print Core::make('helper/concrete/ui')->tabs(array(
    array('feed-details', t('Feed Details'), true),
    array('feed-settings', t('Feed Settings')),
    array('text-colors', t('Text and Colors'))
));
?>

<div id="ccm-tab-content-feed-details" class="ccm-tab-content">
    <div class="form-group">
        <?php echo $form->label('text1', t('Text 1'));?>
        <?php print $form->text('text1', $text1)?>
    </div>
</div>

<div id="ccm-tab-content-feed-settings" class="ccm-tab-content">
    <div class="form-group">
        <?php echo $form->label('text2', t('Text 2'));?>
        <?php print $form->text('text2', $text2)?>
    </div>
</div>

<div id="ccm-tab-content-text-colors" class="ccm-tab-content">
    <div class="form-group">
        <?php echo $form->label('text3', t('Text 3'));?>
        <?php print $form->text('text3', $text3)?>
    </div>
</div>

Example: the HTML output for the tabs

<ul class="nav-tabs nav" id="ccm-tabs-13192">
    <li class="active">
        <a href="#" data-tab="feed-details">Feed Details</a>
    </li>
    <li class="">
        <a href="#" data-tab="feed-settings">Feed Settings</a>
    </li>
    <li class="">
        <a href="#" data-tab="text-colors">Text and Colors</a>
    </li>
</ul>

tab example

A modified version that works on v9

NOTE: This works on Core Version 9.1.3 and PHP Version 8.1.15.

Example: a simple block form using tabbed panels

<?php defined('C5_EXECUTE') || die('Access Denied.');

print Core::make('helper/concrete/ui')->tabs(array(
    array('feed-details', t('Feed Details'), true),
    array('feed-settings', t('Feed Settings')),
    array('text-colors', t('Text and Colors'))
));
?>

<div class="tab-content">
    <div id="feed-details" class="tab-pane active">
        <div class="form-group">
            <?php echo $form->label('text1', t('Text 1'));?>
            <?php print $form->text('text1', $text1)?>
        </div>
    </div>

    <div id="feed-settings" class="tab-pane">
        <div class="form-group">
            <?php echo $form->label('text2', t('Text 2'));?>
            <?php print $form->text('text2', $text2)?>
        </div>
    </div>

    <div id="text-colors" class="tab-pane">
        <div class="form-group">
            <?php echo $form->label('text3', t('Text 3'));?>
            <?php print $form->text('text3', $text3)?>
        </div>
    </div>
</div>

EXTRAS

  1. The changes to this were inspired by this forum post located. The user linuxoid posted the differences as well as some ways to remember the last clicked tab.

  2. Another forum post from mesuva that might prove fruitful to anyone that needs to expand on this. Say for instance Backwards Compatability for earlier versions of Concrete CMS that require the ccm-tab-content- prefix or the class ccm-tab-content is located here.

Thank you to the orginal poster MrKDilkington.

Recent Tutorials
Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Upgrading Concrete from 8.5 to 9.x
Jun 21, 2024
By myq.

How to avoid problems upgrading from 8.5 to 9.x

How to change the default date format
May 30, 2024
By myq.

Change the format of the default date

WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Improvements?

Let us know by posting here.