Add Custom Tabs to Member Profile Pages Using JQuery

This article offers a jQuery code snippet that lets you integrate custom tabs into member profile pages using jQuery.

When clicked, the script adds a corresponding tab and tab pane.

Insert this code at the bottom of the SEO Template or within the Custom Footer Code section under Design Settings.

TIP: 
Unless solely plain text, content inside the "New Tab Content" may probably render more reliably using [widget=shortcode]

Add One Custom Tab

<script>
$(document).ready(function(){
    $('.profile-tabs-nav').append('<li role="presentation"><a href="#divNew" rel="nofollow" aria-controls="tNew" aria-label="New Tab" role="tab" data-toggle="tab" aria-selected="false">New Tab</a></li>');
    $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="divNew">New Tab Content</div>');
});
</script>

Add Multiple Custom Tabs

<script>
$(document).ready(function(){
    $('.profile-tabs-nav').append('<li role="presentation"><a href="#divNew1" rel="nofollow" aria-controls="tNew1" aria-label="New Tab 1" role="tab" data-toggle="tab" aria-selected="false">New Tab 1</a></li>');
    $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="divNew1">New Tab Content 1</div>');
    
    $('.profile-tabs-nav').append('<li role="presentation"><a href="#divNew2" rel="nofollow" aria-controls="tNew2" aria-label="New Tab 2" role="tab" data-toggle="tab" aria-selected="false">New Tab 2</a></li>');
    $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="divNew2">New Tab Content 2</div>');
    
    $('.profile-tabs-nav').append('<li role="presentation"><a href="#divNew3" rel="nofollow" aria-controls="tNew3" aria-label="New Tab 3" role="tab" data-toggle="tab" aria-selected="false">New Tab 3</a></li>');
    $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="divNew3">New Tab Content 3</div>');
});
</script>