Creating tabbed panels in Concrete CMS

Feb 21, 2015


Step 1. Tabbed panels in forms use the concrete ui helper.

Step 2. The concrete ui helper will use the tabs method.

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 -->

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

Example: a simple block form using tabbed panels

<?php defined('C5_EXECUTE') or 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 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 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)?>

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 class="">
        <a href="#" data-tab="feed-settings">Feed Settings</a>
    <li class="">
        <a href="#" data-tab="text-colors">Text and Colors</a>

tab example

Recent Tutorials
How to update Add-Ons if not on the Update Add-Ons Menu item
Jul 4, 2022

How to manually download an add-on and update it when your site's core versions isn't considered compatible with the add-on version.

Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Was this information useful?
Thank you for your feedback.