First you need to configure the widgets you want in tabs without position (Write down the widgets keys)
Now create a widget html and in the template put something like this
Now just create 3 widget and configure the widget key, title, positions, check the option advanced mode option and save
The result should be something like this
Good luck!
Now create a widget html and in the template put something like this
HTML:
<div class="block">
<div class="block-container">
<h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
<span class="hScroller-scroll">
<a href="{{ link('whats-new/posts/') }}?skip=1"
class="tabs-tab is-active"
role="tab"
aria-controls="tab_lastest_threads">Latest threads</a>
<a href="{{ link('whats-new/posts/') }}?skip=1"
class="tabs-tab"
id="tab_lastest_post"
role="tab">New posts</a>
<a href="{{ link('whats-new/profile-posts/') }}?skip=1"
class="tabs-tab"
id="tab_lastest_profile_post"
role="tab">Latest profile posts</a>
</span>
</h2>
<ul class="tabPanes widget--tab">
<li class="is-active" role="tabpanel" id="tab_lastest_threads">
<xf:widget key="tab_lastest_threads" />
</li>
<li role="tabpanel" aria-labelledby="tab_lastest_post">
<xf:widget key="tab_lastest_post" />
</li>
<li role="tabpanel" aria-labelledby="tab_lastest_profile_post">
<xf:widget key="tab_lastest_profile_post" />
</li>
</ul>
</div>
</div>
<xf:css>
.widget-tabs {
overflow: hidden;
.tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>
Now just create 3 widget and configure the widget key, title, positions, check the option advanced mode option and save
The result should be something like this
Good luck!