In other CSS Success articles, we've talked about how to use CSS to change the look and feel of widgets, how to make things match your branding, and how to show and hide different Igloo functions. But there are hidden functions in your Igloo already, waiting to be activated by specific classes, built-in parts of the original template that can change not merely what widgets look like, but how they function. 

All of the classes introduced here will need to be placed in the Appearance tab of a widget in order to work as expected, and will only affect that particular widget on any given Page or Space. However, these custom classes are carried over on widgets created through Page or Space templates, so if you're implementing them en masse, that can save you some time. 

Hiding

Hiding is the most straightforward adding the class below to any widget will immediately tag it with a display: none option, hiding it from view. This is commonly used when setting up Pages or launching new areas, letting you create and configure widgets for parts of your digital workplace that are still under construction, and hiding them until they're ready for the reveal. 

hide

Another use we've seen more recently is using them to retain the results in poll widgets, letting Administrators keep old polls on the page, but using the hide class to conceal all but the latest from view. 

Accordions

Now we're talking function and form. Accordion widgets are designed to save space in an area by compressing widgets vertically. They're most commonly used for Links Widgets, but the class can be applied to any widget type for the same result. A single click on the widget title drops down the widget contents. You can use this to host imported analytics data, calendars, or even a series of wiki articles on a page to construct a training path, but it's most commonly used in the sidebars for calls to action that hold access to resources. To make a widget an accordion widget, it must have a title, and will need the following class: 

accordion

The accordion widget dramatically increases the density of the resources you can hold on a Page, and makes it more interactive, rather than a flat experience that your members are meant to read. 

Tabbed Widgets

I've saved the most complex for last. The tabbed widget customization lets you create a menu and navigate between a set of widgets on the page. This can let people easily change between your social feed, announcements blog, and even a Twitter feed, without making people scroll to down the page to find them. That's only the start, however. You can use tabbed widgets to display an array of policies for onboarding, create task menus for project Spaces, or even use HTML widgets to show embeds and custom content. 

To set one up, add an HTML widget, and give it the following class: 

ps-tabs

This widget is your menu, and will populate with your menu items once we've set them up. Place it on the Page or Space where you'd like the menu to appear, most commonly directly above the widgets that it's going to select. 

Now we can create your tabs. Add two or three widgets to the area below the menu, and give each one a title, as well as the following class in the widget's Appearance area. 

ps-tab

That will tell the code that each one is meant to be a tab in the menu. When you publish the page, the first widget will be shown, while the others are hidden. When a tab is selected, it will hide the first and reveal the appropriate widget instead. 

There are a few limitations with the tabs. The current implementation only permits one tab menu on a page, so it's best to keep it front and centre. Widget titles that are too long can cause the text to wrap in the menu, so brevity is key as well. After that, you're all set. 

If you have any other questions about the Igloo platform, workflows, or best practices, you can leave a comment here, or ask a question in the Community area.