Split up article content into tabs

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

First, create a new snippet, call it Tabs, 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>

Then copy and paste the Snippet merge code (which should be "") into the article in question, and voila! The article is split into tabs at each H2 heading!