Creating tabbed content is a popular way to present information on a webpage. View this tutorial to learn how to help non-technical users easily add tabs.

Easily Add Tabbed Content and Responsive Tabs with Widget Builder

Wed Apr 16, 2014

Creating tabbed content hasn’t always been easy for non-technical content contributors, even though tabs are a very popular way of presenting information on a web page. Ideally, contributors should be able to create new content tabs without needing to see or interact with code. To make this process easier, we’ve put together a template your Percussion CMS administrator can use with our Widget Builder. Once implemented, any contributor can drag and drop new tabs into page layouts, and add new content.

Widget Builder is a Percussion CMS feature that allows users with HTML, CSS and Javascript skills to add custom functionality and elements to their pages. It’s a great way to enhance the built-in functionality that comes standard with our web content management system. Some other examples of what can be done with Widget Builder include creating SEO friendly article widgets andstructuring how contributors enter content.

Create a Custom Add-A-Tab Widget

1. Create a New Widget 

In the top left corner drop down switch over to “Widget Builder” and in the top right corner click on the icon that looks like a sheet of paper with a “+’ symbol on it.

*if you do not see Widget Builder Available on your drop down contact us on how to enable widget builder.

 create and name your tabs widget

2. Fill in Widget Information

Click on the General tab and fill in the information for your widget. Important: when following this tutorial, make sure your widget name, prefix, tab, and file names are exactly the same to ensure the references in our JavaScript, JQuery, and CSS files match and will work properly.

Remember to check off the "Is responsive" box at the bottom.

3. Configure the Content Tab

Add two new fields to your widget: one for the title, which will appear as the tab, and one for the content of the tab.

add simple and rich text fields to your widget

Tip: The name of each of the fields is important as it can not be changed once it has been created and it is used in the Display tab to paste this fields content on your widget. It is case sensitive so please try to copy this tab exactly as it appears here in order to avoid issues.

4. Configure the Resources Tab 

You will need upload and include these files into your website's Themes folder. You can download all the files at this link.

  1. Jquery.responsiveTabs.js
  2. perc-tabs.js
  3. responsive-tabs.css
  4. style.css *optional

upload the supporting files to your themes folder

You should upload all of the files to your templates theme directory in your finder in their appropriate JS or Css folders. Copy or cut out everything in the file path after “/web_resources” in the search bar for each file after uploading them.

reference your supporting Javascript and CSS files in the resources tab

Now reference them in the Resources tab of your Custom Widgets Configuration.

Maintaining consistency across file paths and element names will ensure your widget works after it's deployed.

5. Add Display HTML

Click on the Display tab. Hit “Auto Generate” to create your display HTML. CM1 will create display code for you automatically.

It should look like this:

<div>
<div>$title</div>
<div>$tabcontent</div>
</div>

Now add these classes to your display code, again, ensuring everything is an exact match:

<div class="perc-tab-widget">
<div class="perc-tab-heading"> $title </div>
<div class="perc-tab-content"> $tabcontent </div>
</div>

6. Save and Deploy Widget

Deploying your widget adds it to the widget menu in the Layout tab of your page editor. Once you've deployed a widget, you can't un-deploy it, but you can continue to edit it and deploy after every update. You can also disable a widget to keep users from utilizing it, if necessary.

Adding Custom Tabs Widgets to Pages 

Once you've completed most of this work, there are still a few steps left to ensure your new tabs widget is usable by every content contributors.

1. Add the Widget to a Template

Open up a page template for editing. You can use any template to which you want users to add tabs, and can add this functionality to any template you choose.

2. Add a New Region to the Template with the class “perc-tab-container”

ensure the class and region names match the references in the code

3. Add a few Add-A-Tabs Widgets to the Region

Make sure you do this at the page level if you wish to give contributors the option to add and remove tabs as needed.

4. Add Content to Your Widget

You will see that your new tabs widget looks exactly like other Percussion widgets, just with different options. Your content contributors will know exactly how to edit them because they are already familiar with this user interface.

 tab widget content

5. Save and Preview Your Widget

redo-full-tab.jpg 

Note: in editing mode, your tabs will appear stacked so that you can easily view their content during the editing process. When you preview the page, the tabs will display with the correct styling.

redo-accordian-tab.jpgWhile in Preview mode, you can use Percussion's integrated mobile preview to see how your tabs will appear on various devices like tablets and smartphones.

Because the widget is already responsive, there is nothing you need to do to make it mobile friendly.

Add Custom Styling to Your Widget

You can customize the look and feel of your tabs. This may require a little CSS experience. Use the included style.css file to change or enhance any of the rules.

The comments will help identify how each property styles your tabs. Pick your background colors, text colors, and publish.

For more information on our Widget Builder, view the full documentation on ourPercussion Help site.

Armani Appolon
Best Practice Coach

Armani spends his days helping Percussion customers through their implementations as part of our customer success team. He's the tallest member of the team, standing tall at 6 foot 7. His favorite part of the job is learning new things and meeting new people every day, teaching what he learns to the people he meets. In his spare time Armani volunteers at the local Boys and Girls club near his home in Boston, teaching kids how to use computers.

comments powered by Disqus