Display K2 Extra Fields in Bootstrap Tabs

Display K2 Extra Fields in Bootstrap Tabs - It's Easy!

For many years, we relied on a wonderful Joomla plugin, SWK2 Tabs Pro, by Styleware that displayed K2 Extra Fields in tabs. This is a huge advantage over the default display which just stacks the Extra Fields in a verical layout. If you have a lot of Extra Fields and/or they have a lot of content (Images, maps, or other media), then the page becomes long and hard to navigate, especially for mobile devices.

Unfortunately, this plugin has not been updated for quite a long time and no longer works in the latest versions of Joomla and K2. There is, nonetheless, a handy alternative for Joomla sites that use the Bootstrap platform in their template. Joomla was the first CMS to integrate Bootstrap into both the front- and back-end views. Joomla 3's default template, Protostar, is built on Bootstrap, and there are many template developers who take advantage of Bootstrap's robust and thoroughly tested library of responsive components, including tabs.

Converting content to tabs using Bootstrap simply requires adding classes and attributes to the html of the tab headers (the names that users click on to open a tab) and their corresponding content.

The header code looks like this:

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#rent" class="nav-link active" data-toggle="tab">Rent</a>
    </li></ul>

The content for that header looks like this:

<div class="tab-content">
    <div class="tab-pane fade in active" id="rent">
        <p>Content goes here!</p>
    </div>
</div>

Obviously, you would just replace "rent" with whatever name you want to use.

With the release of K2 2.9, things get even easier, since we can now embed a K2 Extra Field name or value in a K2 template with one line of code:

<?php echo $this->item->extraFields->ExtraFieldName->value; ?>

Now we simply have to replace "Content goes here!" with the Extra Field snippet:

div class="tab-content">
    <div class="tab-pane fade in active" id="rent">
        <p><?php echo $this->item->extraFields->Rent->value; ?></p>
    </div>
</div>

The whole block looks like this:

<?php if($this->item->params->get('itemExtraFields') && count($this->item->extra_fields)): ?>
		<!-- Item extra fields -->
		<div class="itemExtraFields">
			<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#rent" class="nav-link active" data-toggle="tab">Rent</a>
    </li>
    <li class="nav-item">
        <a href="#floorplan" class="nav-link" data-toggle="tab">Floor Plan</a>
    </li>
    <li class="nav-item">
        <a href="#pets" class="nav-link" data-toggle="tab">Pets</a>
    </li>
     <li class="nav-item">
        <a href="#walkscore" class="nav-link" data-toggle="tab">Walk Score</a>
    </li>
    
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="rent">
        <p><?php echo $this->item->extraFields->Rent->value; ?></p>
    </div>
    <div class="tab-pane fade" id="floorplan">
        <p><?php echo $this->item->extraFields->Floorplan->value; ?></p>
    </div>
    <div class="tab-pane fade" id="pets">
       <p><?php echo $this->item->extraFields->Pets->value; ?></p>
    </div>
     <div class="tab-pane fade" id="walkscore">
       <p><?php echo $this->item->extraFields->WalkScore->value; ?></p>
    </div>
     <div class="tab-pane fade" id="map">
       <p><?php echo $this->item->extraFields->Map->value; ?></p>
    </div>
</div>
		</div>
		<?php endif; ?>

You can see this in action here.

If you need help coding a custom K2 template to put your Extra Fields in tabs, contact me and I'll be happy to help!

Call Today:

Display K2 Extra Fields in Bootstrap Tabs - It's Easy!