Ben's tips: Making widget tabs more useful in Igloo
I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.
Widget tabs on pages
The Widget Tabs Enhancement is fantastic!
While it can take a while to learn how to use it, even non-technical users can create easy to navigate pages that users can navigate easily. And by allowing a tab to show/hide multiple widgets, have multiple tabs on the page, icons in the tabs themselves, and even nested tabs, this extension can grow with most user needs.
So what's missing?
I get these complaints from users about tabs:
- If I open a link in a tab other than the first one on the page, hitting the back button restores back to the first tab again
- I can't share a link to a page with a particular tab open
- I can't bookmark a page with a particular tab open
Can we fix it?
Well, the best way to fix it would be for Igloo to add this functionality to the extension. There are a few ideas on this, but they haven't seen much interest. One is even marked as "Unlikely to Implement!"
So, we need to solve it ourselves
This will require JavaScript. This code can either go on the Advanced panel for a particular page OR in the footer code for your site.
<script type="text/javascript">
//<![CDATA[ jQuery(document).ready(function() {
let h = window.location.hash; const tabholder = "#ig-page-view .ps-tabs .ig-widget-html-content"; if (document.querySelector(tabholder) != null) { if (h.substring(1, 5) == "tab-") { hash_tab_select("first"); } add_click_handlers(); var tabelementToObserve = document.querySelector(tabholder); var tabobserver = new MutationObserver(function() { if (h.substring(1, 5) == "tab-") { hash_tab_select("observer"); } add_click_handlers(); }); tabobserver.observe(tabelementToObserve, { childList: true }); addEventListener('hashchange', (event) => {
h = window.location.hash; if (h.substring(1, 5) == "tab-") { hash_tab_select ("first"); } }); } function add_click_handlers() { jQuery(tabholder + " li").each( function(idx) { that = jQuery(this); if (!that.data("clickset")) { add_click_handler(that); } } ) } function add_click_handler(obj) { obj.data("clickset", true); obj.click(function() { that = jQuery(this); history.replaceState(null, "", window.location.origin + window.location.pathname + "#tab-" + that[0].classList[0]); }); } function hash_tab_select(where) { jQuery(tabholder + " li") .each( function(idx) { that = jQuery(this); // Check to see if this tab was picked if (that[0].classList[0] == h.substring(5)) { console.log("Triggering tab click from " + where); that.trigger('mousedown').focus() } } ); } }) //]]>
</script>
Whew! That's a lot of code! But it should solve all the issues listed above.
Let me know if you have tried it out. And REALLY let me know if you have issues with the above!
EDIT July 27, 2022: Add the ability to watch for HASH changes in case links on the page want to set the tab.
19 Replies
Hey Benjamin Kahn - I tried it and it worked really well. Thanks for sharing!
BTW -- when we originally started using the Accordions extension with the Tabs extension, they didn't work together. We solved the problem on our site, and gave the code to Igloo.
But if your site still has issues when using Tabs and Accordions, you should add this code to your site CSS:
Alexandra Morun and John Pentland this is REALLY cool! Thank you for sharing Benjamin Kahn!
FWIW, one last piece is missing: in search results, it would be INCREDIBLE if
I don't think I can solve this issue.
Fantastic, thank you so very much for sharing! And this would be awesome to implement, absolutely!
This works wonderfully--thanks for this, Benjamin Kahn!
This is amazing!!!! We were actually considering breaking up most of our tabbed pages because of the linking issue. Thank you!
This is great! Maybe I'm missing it, but what would a link to a specific tag look like?
My idea is to have CTA icons at the top of the page that would then link to the specific tab, that's sitting below it (Don't mind the mismatched labels, it's a test page lol)
Is this possible? Thanks!
Hi Cristina Herrera!
Interesting idea! The code, as it was written above, would NOT allow this to work. (It's missing a section which watches for changes to the hash part of the URL.)
However, adding this functionality is pretty easy. I've got an update which appears to work. After posting this comment, I'll update the code above to support the new functionality.
The links in the CTA should be: #tab-benefits or #tab-medical or #tab-dental or #tab-vision
Benjamin Kahn Ahh! Thanks so much! This is a game-changer for sure!
Edit to add: THIS IS SO COOL! Works beautifully!
Benjamin Kahn thanks for these tips and details about the widget tabs. I have been using for a while but it is helpful to have it documented here.
I wondered if there was something I am missing about the tabs with multiple widgets. Or maybe it is a feature improvement needed.
I have added 3 wiki articles to 1 tab, but there seems to be no way to have a bolded/underlined/larger font for each title of the wiki or even a line separating these. One can only use the title for the tab itself, then each of the subsequent articles just blend into one another.
E.g. in my screen shots below, the first widget title is renamed to use it for the tab. Then for each widget section, ending with the View Article Details link, all I could figure out to do was add the title in the Description (Madcap Central: DB Examples Collection Drafts and MadCap Central DB Tech Info Drafts) but I could not apply any formatting or add any clear separation between articles.
Any suggestions?
PS we cannot use the Appearance section for widgets as our workplace is set up by CSS
What it looks like on the Widget (as one scrolls)
Title does not work after first widget used for Tab, no options in Description to make it clear or add title of wiki article.
Hi Amanda!
Huh. We don't typically use the description box in wiki article widgets. I had to test in order to convince myself it existed!
If we need headlines inside a tab, we typically put the headline inside the wiki article. (You could also create multiple widgets per tab. Just set a blank HTML widget with a title for the tab, and then under that create a wiki article widget with a title as well. The tab set up instructions are here: https://customercare.igloosoftware.com/support/knowledgebase/all_articles/articles/widget_tabs_enhancement#section_multiple )
Or, I suppose, you could style the description field in that widget to make the first line appear like a headline:
div.ig-widget-wiki div.ig-cpt-pretext::first-line { font-size: 1.5rem; }
If you wanted the whole description to be the headline, you'd remove the "::first-line" bit from the code above. If you wanted to get fancy, you could create a CSS class using the "class" line in the appearance tab for the widget and insert that into the CSS description.
FWIW, we ALSO don't have the use of most of the appearance tab in your digital workspace. Most users wouldn't have the design skills to use it appropriately anyway. However, we hide the options that won't work with the following extra site CSS:
Benjamin Kahn Thanks for the detailed responses and suggestions. Not sure I will use any of these...I still think user improvements are needed for this multi-widget/one tab concept. When I have time I will add something to the product suggestion place.
Thanks again for your quick and thoughtful responses.
Amanda Wood Hi Amanda! I've been following this post too and got your comment notification. What I've been doing in our digital workplace is utilizing the CTA widget as a "banner" on top of multiple widgets within one tab:
I'd noticed that teammates weren't aware of the different sections under the tab and was looking for new ways to call it out. You'd set the layout to Text Box and use the Link Text to describe the widget below. Hope this helps!
Cristina Herrera cool! Thanks for this, I have not used the CTA widget for a while (if ever!) so this is a great opportunity to test this. Much appreciated.
We have been using this for a while and it works wonderfully when we link to the tabs from either outside of our Igloo site or from blog posts. However, when we try to link directly to specific tabs from an HTML widget, it ends up remove the anchor portion of the URL and just goes to the page, not the specific tab. Is there a way around that? Thank you!
Lindsey Sparks there is!
We have a couple of bug reports open with igloo about this, but the work-around is to remove the "http:" or "https:" part of the URL. So a URL like:
http://www.example.com/my page/#tab-second-tab
Should be written like:
//www.example.com/my page/#tab-second-tab
I know it's weird, but that is a valid URL. 😁
Benjamin Kahn Thank you!!!!
Is it possible to use the accordion in the actual tabs navigation menu? I can get it to work within each tab, but would love to group the tabs in accordions with the ps-tabs class. Benjamin Kahn