Add html code block to start tab section:
<div class="tabs-start"></div>
Next add a line of code for the first tabbed section. Name it whatever that content section is:
<div class="tab-section">Overview</div>
After this code block, add whatever content you want in that first tab through normal squarespace blocks. Ex: If you want text content, add & style it through a normal text block. If you want images, add a gallery block... etc.
Repeat the the line of code for each subsequent tab section and give it a unique name. Add the content under that accordingly:
<div class="tab-section">Tab Section 2</div>
Lastly add the javascript the advanced code injection:
/* HEADER CODE INJECTION */
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
/* FOOTER CODE INJECTION */
<style type="text/css">
/*=============== SQUARE STUDIO TABBED CONTENT PLUGIN START ===============*/
.sqpl-tab-button{cursor:pointer;display:inline-block;border-bottom:2px solid transparent;padding:.5em 2em;margin:0;text-align:center;color:#888;position:relative;z-index:3}.sqpl-tab-button:hover{border-bottom:2px solid #000;color:#000}.sqpl-active-tab{border-bottom:2px solid #000;color:#000}.sqpl-tab-content{border-top:2px solid #d4d4d4;z-index:1}.sqpl-tab-controls{margin-bottom:-2px;z-index:2}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
function init_sqpl_tabs(){tab_groups=[],build_tabs();var a=block_search();a.length>0&&(find_tabs(a),find_tab_heights(),create_tab_wrappers(),add_tab_buttons(),load_first_tabs())}function build_tabs(){$(".tabs-start").each(function(a,b){$(this).closest(".sqs-block").addClass("tabs-start-parent")}),$(".tabs-end").each(function(a,b){$(this).closest(".sqs-block").addClass("tabs-end-parent")}),$(".tabs-start-parent").each(function(a,b){$(this).before('<div id="sqpl-tab-group-'+a+'" class="sqpl-tabs"><div class="sqpl-tab-controls"></div><div class="sqpl-tab-content"></div></div>')}),$(".sqpl-tab-content").css({overflow:"hidden",position:"relative"})}function block_search(){var a=[];return $(".tabs-start-parent").each(function(b,c){var d=[];$(this).nextUntil(".tabs-end-parent").each(function(a,b){d.push($(this))}),a.push(d)}),$(".tabs-start-parent").remove(),$(".tabs-end-parent").remove(),a}function find_tabs(a){for(var b=0;b<a.length;b++){for(var c=a[b],d=[],e=[],f="",g=!1,h=0;h<c.length;h++)c[h].find(".tab-section").length>0?(0==g?g=!0:(d.push({elements:e,tab_name:f}),f="",e=[]),f=c[h].text(),c[h].remove()):g&&e.push(c[h]);d.push({elements:e,tab_name:f}),tab_groups.push(d)}}function find_tab_heights(){for(var a=0;a<tab_groups.length;a++)for(var b=tab_groups[a],c=0;c<b.length;c++){var d=b[c].elements[0],e=b[c].elements[b[c].elements.length-1],f=d.offset().top,g=e.offset().top+e.outerHeight(),h=g-f;b[c].section_height=h}}function create_tab_wrappers(){for(var a=0;a<tab_groups.length;a++)for(var b=$("#sqpl-tab-group-"+a).find(".sqpl-tab-content"),c=tab_groups[a],d=0;d<c.length;d++){b.append('<div class="sqpl-tab sqpl-tab-'+d+'"></div>'),c[d].wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-"+d),c[d].wrapper.css("opacity",0);for(var e=0;e<c[d].elements.length;e++)c[d].wrapper.append(c[d].elements[e])}$(".sqpl-tab").css({position:"absolute",width:"100%"})}function add_tab_buttons(){for(var a=0;a<tab_groups.length;a++){for(var b=tab_groups[a],c=$("#sqpl-tab-group-"+a).find(".sqpl-tab-controls"),d=0;d<b.length;d++)c.append('<div class="sqpl-tab-button sqpl-tab-button-'+d+'" sqpl-tab="'+d+'" sqpl-group="'+a+'">'+b[d].tab_name+"</div>"),b[d].button=$("#sqpl-tab-group-"+a).find(".sqpl-tab-button-"+d),b[d].button.click(function(){var a=parseInt($(this).attr("sqpl-tab")),b=parseInt($(this).attr("sqpl-group"));load_tab(b,a)});tab_groups[a].group_wrapper=$("#sqpl-tab-group-"+a),tab_groups[a].content_wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-content"),tab_groups[a].controls_wrapper=$("#sqpl-tab-group-"+a).find(".sqpl-tab-controls"),tab_groups[a].current_tab=0}}function load_first_tabs(){for(var a=0;a<tab_groups.length;a++){var b=tab_groups[a],c=b.current_tab;b[c].wrapper.css({top:"25px",opacity:1}),b.content_wrapper.css({height:b[c].section_height});for(var d=0;d<b.length;d++)d!=c&&b[d].wrapper.css("top",b[c].section_height+50);b.controls_wrapper.find(".sqpl-tab-button-"+c).toggleClass("sqpl-active-tab")}}function load_tab(a,b){var c=tab_groups[a],d=c.current_tab;if(b!=d){find_tab_heights(),c.controls_wrapper.find(".sqpl-tab-button-"+d).toggleClass("sqpl-active-tab"),c.controls_wrapper.find(".sqpl-tab-button-"+b).toggleClass("sqpl-active-tab"),c[d].wrapper.animate({opacity:0},{duration:300,complete:function(){$(this).css("top",c[b].section_height+100)}}),c[b].wrapper.css("top","25px"),c[b].wrapper.animate({opacity:1},{duration:300}),c.content_wrapper.css({height:c[b].section_height+25});for(var e=0;e<c.length;e++)e!=b&&e!=d&&c[e].wrapper.css("top",c[b].section_height+100);c.current_tab=b}}function interval(a,b,c){var d=function(b,c){return function(){if("undefined"==typeof c||c-- >0){setTimeout(d,b);try{a.call(null)}catch(a){throw c=0,a.toString()}}}}(b,c);setTimeout(d,b)}function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}var tab_groups=[];$(document).ready(function(){init_sqpl_tabs()});var update_tab_heights=function(){find_tab_heights();for(var a=0;a<tab_groups.length;a++){var b=tab_groups[a],c=b[b.current_tab].section_height;b.content_wrapper.css({height:c+25})}};interval(update_tab_heights,2e3,5),document.addEventListener("pageChange",function(){init_sqpl_tabs()}),window.onload=watch;
/*================ SQUARE STUDIO TABBED CONTENT PLUGIN END ================*/
</script>
Add custom styling through inspecting and targeting specific classes.
