How to make a tabbed widget

How to make a tabbed widget

@DL6 I'd like to make it staff online and members online two seperate tabs but staff online is part of members online. How can I do this? Thanks.
 
I'm replacing the text links with fontawseome icons with this
Code:
<span class="tabs-tab" id="widget key 3" role="tab"><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i></span>

Is there a way to get a tooltip so when hovering over each icon it shows Latest Posts or whatever the tab is called?
 
Is there a way to get a tooltip so when hovering over each icon it shows Latest Posts or whatever the tab is called?
You'll want to use something like this
Code:
<span class="tabs-tab" id="widget key 3" role="tab" data-xf-init="tooltip" title="Latest Posts"><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i></span>

Untitled-1.webp
 
Last edited:
Please can you share full code for this?
Only thing that is different from the example in the overview is that instead of using (or new posts, profile posts etc)
Code:
 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Latest threads</a>

It is using title=" " and data-xf-init="tooltip" and replacing the text link with FontAwesome icons, for example
Code:
<a title="Latest Threads" href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        data-xf-init="tooltip"
                        aria-controls="tab_lastest_threads"><i class="fas fa-comment-alt"></i></a>

Individual styles may need some css adjustments to display properly
 
Is it possible to Lazy Load non selected tab?
Only loads the content of the widget when selected by the user.

Thanks!
 
This is a great tutorial!

How can I style the tab background and font to be the same as my normal block titles? I'm not using this in a sidebar, so I'd like it to look similar to the other center blocks. THANKS!

Tabs look like this

tab1.webp

Would like tabs to look like this, color and font.

tab2.webp
 
Hi,

Can any one assist, please?

I want to restrict Tab views to certain members only. That is, I don't want the TAb to even display to certain members so its completely hidden from them, only viewable by those I choose.

Screenshot - 2019-11-07T203412.000.webp

I want to remove feedback and watched threads from guests views, so they can even click on the Tab as they wont see it.

Thanks
 
Hey, sorry for the necro. I used this guide to display some iframe leaderboards as tabs on my website as seen as https://happy-hg.com/forum/pages/leaderboards/
However, I can't seem to be able to remove the black square that surrounds the iframe. Any help will be greatly appreciated! Here's the code I'm currently using
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">
                 <span class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_survival">Survival</span>
                 <span
                        class="tabs-tab"
                        id="tab_skyblock"
                        role="tab">Sky Block</span>
                 <span  class="tabs-tab"
                        id="tab_sbquests"
                        role="tab">Sky Block Questers</span>
                 <span  class="tabs-tab"
                        id="tab_pvp"
                        role="tab">Kit PvP</span>
                 <span  class="tabs-tab"
                        id="tab_pvpranked"
                        role="tab">Kit PvP Ranked</span>
                 <span  class="tabs-tab"
                        id="tab_pvpduels"
                        role="tab">Kit PvP Duels</span>
                 <span  class="tabs-tab"
                        id="tab_scb"
                        role="tab">Super Craft Bros</span>
                 <span  class="tabs-tab"
                        id="tab_skywars"
                        role="tab">Sky Wars</span>
                 <span  class="tabs-tab"
                        id="tab_sg"
                        role="tab">Survival Games</span>
                 <span  class="tabs-tab"
                        id="tab_solosg"
                        role="tab">Solo SG</span>
                 <span  class="tabs-tab"
                        id="tab_hitman"
                        role="tab">Hitman</span>   
                 <span  class="tabs-tab"
                        id="tab_drawit"
                        role="tab">Draw It</span>                           
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="tab_survival">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100survival/"></iframe></p>
             </li> 
             <li role="tabpanel" aria-labelledby="tab_skyblock">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100sb/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_sbquests">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100sbquests/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_pvp">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100pvp/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_pvpranked">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100elopvp/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_pvpduels">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100duelpvp/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_scb">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100scb/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_skywars">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100sw/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_sg">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100sg/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_solosg">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100sgsolo/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_hitman">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100hitman/"></iframe></p>
             </li>
             <li role="tabpanel" aria-labelledby="tab_drawit">
                 <p><iframe style="width: 100%; height: 2670px;" src="https://www.happy-hg.com/top100drawit/"></iframe></p>
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}

</xf:css>
 
Top Bottom