Xenforo.Asia
All About Xenforo
  • Our resources on xenforo.asia Forum is CLEAN and SAFE. So you can use it for development or production. But sometime the antivirus will warn the JS code. It's no problem. So before downloading, you need to disable the antivirus tools and then enjoy your "Party"!

How to make a tabbed widget

xenforo

Well-known member
Staff member
admin
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


Code:
<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="url to the content"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="widget key 1">
                 <xf:widget key="widget key 1" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 2">
                 <xf:widget key="widget key 2" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 3">
                 <xf:widget key="widget key 3" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>
In my example i want to show latest threads, latest post and latest profile post, so i replace the values with something like this.

Code:
<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>

In my example i want to show latest threads, latest post and latest profile post, so i replace the values with something like this.

Code:
<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 configure the widget key, title, positions, check the option advanced mode option and save
The result should be something like this


brNdyzY.gif
 

ABOUT US

Xenforo.asia is the original nulling community, you can download most items for free OR you can get premium resources (nulled by xenforo.asia OR) with very cheap prices.

Xenforo.asia

Did you know that xenforo.asia owns a wide array of different websites including Upnulled.co.network and Bestfreelancetips.com? Please visit our website for access to our Warez Site, File Sharing Site, Image Hosting site and many more..
Top