Now it's time to see your new page type in action. Create a new page using the new "Tabs" page type. In the Tabs number box, choose the number of tabs you would like displayed on your page, and fill in the corresponding "tab_label" attributes with the labels of each tab. Once completed you should now have the ability to add blocks to each tab using the native Concrete5 editing tools.
Twitter's Bootstrap comes preloaded with a ton of useful tools including togglable tabs. In order to utilize these tabs without the need of an add-on, we will need to create several custom attributes and set up a new page type.
Note: This how-to assumes that you already have Bootstrap properly set up to be used on the front-end of your website.
Create custom attributes
- (Optional) Create a new attribute set called "Tabs"
- Create a new Number attribute with the handle "tabs"
- Create several text attributes with handle "tab_label0", "tab_label1", "tab_label2", and so on for the maximum number of tabs you will have
Add new page type
- Create a new page type with your preferred name and the handle "tabs"
- Place a checkmark next to all of the custom attributes previously created (tabs, tabs_label0, tabs_label1, tabs_label2, etc)
- Create a corresponding page type file within your theme's directory called tabs.php and embed the following code where you would like the tabs to appear:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<?php
$tabs = $c->getAttribute('tabs');
for( $i=0; $i<$tabs; $i++ ) {
if ($i == 0){
echo '<li class="active"><a href="#tab' . $i . '" role="tab" data-toggle="tab">' . $c->getAttribute('tabs_label' . $i). '</a></li>';
} else {
echo '<li><a href="#tab' . $i . '" role="tab" data-toggle="tab">' . $c->getAttribute('tabs_label' . $i). '</a></li>';
}
}
?>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<?php
for( $i=0; $i<$tabs; $i++ ) {
if ($i == 0){
echo '<div class="tab-pane active" id="tab' . $i . '">';
}else{
echo '<div class="tab-pane" id="tab' . $i . '">';
}
$a = new Area('Tab' . $i);
$a->display($c);
echo '</div>';
}
?>
</div>
Loading Conversation