Split up article content into tabs

This code will automatically "split" an article into tabs, using "Heading 2" headings as the split points/tab headings.

Using the snippet

First, create a new snippet by visiting Library > Snippets.

Name it 'Tabs' for example.

Switch from WYSIWYG Editor to Code Editor, and paste the following code in:

<script id="tabs-prepend">
$(function(){

/* Build Tabs */
var tabs = '<ul class="nav nav-tabs test2" 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);
$(this).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);  



});
</script>

<script>
$(function(){

/*Wrap All Content */
$('.hg-article-body :header').first().nextAll().andSelf().wrapAll('<div class="tab-content"></div>');

/*Wrap Sections */
var count = 0;
$('.hg-article-body h2').each(function(){
var link = $(this).text().replace(/([~!@#$%^&*()_+=`{}\[\]\|\\:;'<>,.\/\? ])+/g, '-').toLowerCase();
if(count == 0){
 $(this).nextUntil('h2').andSelf().wrapAll('<div class="tab-pane fade active in" id="'+link+'"></div>');
count++;
}else{
$(this).nextUntil('h2').andSelf().wrapAll('<div class="tab-pane fade" id="'+link+'"></div>');
}
});
//var tab = $( ".hg-article-body :header" ).text();
//$( ".hg-article-body :header" ).wrap( "<div class='expand'></div>" );
});
</script>

Finally, save the snippet, and copy & paste the snippet merge code value at the top of the article in question. You can also insert the snippet at the top of your article by using the 'Insert Snippet' option in the editor instead and voila! 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!

How does it work?

Let's say that you have a document laid out like this, where each section is a Heading 2:

Once you add the snippet to the article, the article appears this way:

Can I link to specific tabs?

Yes, you can, though the links are dependent on the text in the headings.

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."

In the example above, the URLs look like myknowledgebase.knowledgeowl.com/help/tabbed-content-example#section-1, myknowledgebase.knowledgeowl.com/help/tabbed-content-example#section-2, and myknowledgebase.knowledgeowl.com/help/tabbed-content-example#section-3.

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.

Keep in mind that since those links are generated dynamically based on the heading text, changes to the headings will break any links to specific tabs!

My tabs aren't working--why?

Most often, tabs won't generate properly due to two reasons:

  1. 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.
  2. You aren't consistently using Header 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.)
  3. 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.