How to add tabbed blocks in Invision Community Pages

Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page.

While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content.

To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor.

Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do.

In the content section you can now add the HTML and template logic to create the tabs section.  The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/

<div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false">
	<a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
    <ul role="tablist">
        <li>
            <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true">
                <i class="far fa-newspaper"></i> Management Articles
            </a>
        </li>
        <li>
            <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item">
                <i class="fas fa-comment-alt"></i> Management Discussions
            </a>
        </li>
        <li>
            <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item">
                <i class="fas fa-id-card"></i>Management People
            </a>
        </li>
      
      <li>
            <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item">
                <i class="fas fa-cloud-download-alt"></i>Management Downloads
            </a>
        </li>
      
      <li>
            <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item">
                <i class="fas fa-play-circle"></i>Management Videos
            </a>
        </li>
      
      
      
      <li>
            <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item">
                <i class="fas fa-link"></i>Management Links
            </a>
        </li>
      
    </ul>
</div>

<section class="ipsTabs_panels ipsTabs_contained">
    <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'>
    	{block="latest_management_articles"}
      <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a>
    </div>
    <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'>
    	{block="management_forum_topics"}
    </div>
    <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'>
    	{block="awesome_management"}
    </div>
  <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'>
    	{block="latest_management_downloads"}
    </div>
  <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'>
    	{block="latest_management_videos"}
    </div>
 
  <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'>
    	{block="latest_management_links"}
    </div>
</section>

In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel".

What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs.

Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/

I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum.