Split up article content into tabs

Overview

Sometimes, you want to be able to split an article into tabbed content. We've created some code that will automatically split an article into tabs, using Heading 2 headings as the split points/tab headings.

Implementation: Create a snippet that has the logic to generate the tabs; add that snippet at the top of articles you'd like to display their content tabbed.

Use Case: This can be useful when you have a single article showing different content for each product version and each product version is a heading.

You can see this snippet in action in this article itself.

We offer snippets like this as courtesy standalone customizations for your knowledge base. Using multiple snippets together may cause unintended consequences. Please snippet responsibly and remember that some problems are best solved by a developer!

Creating the snippet

First, you'll need to create the snippet that will generate the tabs. To do so:

  1. Go to Library > Snippets.
  2. Click the + Create Snippet button.
  3. Give your snippet a Name, like "Tabs."
  4. Give your snippet a Description, like "This snippet will split a single article into tabs, using each H2 heading as a tab label."
  5. Click the dropdown next to Snippet Content and select Code Editor.
  6. Copy the code below and paste it into the editor:
    <script id="tabs-prepend">
      $(function(){
        /* Build Tabs */
        var tabs = '<ul class="nav nav-tabs" style="margin: 19px 0px 18px; visibility: visible;">';
        var el, title, link;
        var count = 0;
        /* Add a tab for each header to table of contents */
        $(".hg-article-body h2").not(":empty").each(function() {
          el = $(this);
          el.hide();
          title = el.text();
          anchorTitle = el.text().replace(/([~!@#$%^&*()_+=`{}\[\]\|\\:;'<>,.\/\? ])+/g, '-').toLowerCase();
          link = "#" + anchorTitle;
          el.html('<a id="'+anchorTitle+'" class="anchor"></a>' + el.html());
          if(count == 0){
            newLine = '<li class="active"><a data-toggle="tab" href="' + link + '">' + title + "</a>" + "</li>";
            count++;
          }else{
            newLine = '<li><a data-toggle="tab" href="' + link + '">' + title + "</a>" + "</li>";
          }
    
    
          tabs += newLine;
        });
    
    
        tabs += "</ul>";
        
        /* Add table of contents to page */
        $("#tabs-prepend").before(tabs);
    
    
        /*Wrap All Content */
        $('.hg-article-body #tabs-prepend').parent().next(':header').nextAll().andSelf().wrapAll('<div class="tab-content"></div>');
    
    
        /*Wrap Sections */
        var count = 0;
        var anchor = location.hash;
        $('.hg-article-body h2').each(function(){
            var link = $(this).text().replace(/([~!@#$%^&*()_+=`{}\[\]\|\\:;'<>,.\/\? ])+/g, '-').toLowerCase();
          if(count == 0 || ( anchor.match('#') && $(this).nextUntil('h2').find('#'+anchor).length > 0 ) ){
            $('.tab-pane.active').removeClass('active');
                 $(this).nextUntil('h2').andSelf().wrapAll('<div class="tab-pane fade active in" id="'+link+'"></div>');
              //$('.nav-tabs a[href="#' + link +'"').tab('show');
             //if (anchor.match('#')) {
              //    setTimeout(function(){$(document).scrollTop($(anchor).offset().top - 200)}, 100);  
            // }
              count++;
            }
            else
          {
                $(this).nextUntil('h2').andSelf().wrapAll('<div class="tab-pane fade" id="'+link+'"></div>');
            }
        });
    
    
        var url = document.location.toString();
        if (url.match('#')) {
          $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
          var anchor = location.hash;
        }  
      });
    </script>
  7. Click the Create Snippet button.
  8. Here's a sample of what the completed snippet might look like:
    Sample snippet

Using the snippet

With the snippet created, you can now add it to any article you'd like to display in tabs.

Open the article in edit mode, insert the snippet merge code value at the top of the article in question, directly above the first Heading 2.
Snippet merge code should be inserted right above the first Heading 2

To insert the snippet, click the 'Insert Snippet' option in the editor, search for the snippet title you used, and insert the snippet.

Be sure to Save your changes. The article should now be split into tabs at each Heading 2 heading once you save it.

Make sure that the snippet merge code is free of any header formatting after you paste it.

We offer snippets like this as courtesy standalone customizations for your knowledge base. Using multiple snippets together may cause unintended consequences. Please snippet responsibly and remember that some problems are best solved by a developer!

While we don't officially encourage you to use the tabs snippet in the same article as an expand/collapse snippet, if you are trying to use them together, we recommend putting the expand/collapse snippet before the tabs snippet.

Tweaks

If you'd like to create tabs from a different header level (such as H3, H6, etc.), update each appearance of "h2" in the code to the level of your choice. There's one h2 reference in the Build Tabs section of the code, and four h2 references in the Wrap Sections section of the code.

Can I link to specific tabs?

Yes, you can, but with two warnings:

  •  The URLs for each tab will automatically change when the headers are edited, so if someone changes the headings, it will break those links.
  • You can't insert hyperlinks into this article to navigate to other tabs in the same article. (e.g. I don't have a link here to navigate you back to the Overview tab). I could open it in a new browser tab and it would work, but not in the same browser window I'm currently in.

If you view the live version of your article with tabs, you'll see that each tab gets identified using a lower case version of the heading with dashes as spaces. You can see this if you hover over the tab, or if you right-click on the tab and select "Copy link address."

Here's one such link which will direct you back to the Overview tab of this article.

You can right-click on a tab to copy the link address and give that link to other people to send them directly to a particular tab, or you can use that link as a reference somewhere else.

Troubleshooting

Generally, tabs can have issues for several reasons:

  1. You have text between the snippet merge code and the first Heading 2. The snippet can't handle this gracefully, so it may cause display issues or clicking issues.
  2. You have a <div> or other structure that spans more than one Heading 2. The snippet needs each Heading 2 to be an entire container unto itself. Divs or other HTML elements that begin in one Heading 2 and end after another Heading 2 will confuse the snippet. It will probably generate correctly titled tab headers but will include content from the entire containing element in the first tab it appears in. If you're using divs to add styling or other elements, you'll need to begin and end each div within the Heading 2, and start a new div below the next Heading 2.
  3. You aren't consistently using Heading 2s. To fix this, review each of your headers to be sure it's set to Heading 2. (If you've adjusted the snippet to use a different heading level, make sure the article is consistent with what the snippet's expecting.)
  4. You have other snippets that are in conflict with this snippet. This problem is harder to fix and dependent on the snippets you have running. Sometimes changing the order of the snippets helps; sometimes you will need to remove the offending snippet entirely or review the logic it's using.