How to make a tabbed widget

How to make a tabbed widget

SkellyX

Member
@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.
 

Creaky

Active member
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?
 

Gemma

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

rdn

Well-known member
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.JPG

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

tab2.JPG
 
Top