Cases for Collapsible Containers

Cases for Collapsible Containers

In May 2019, Tableau released version 2019.2.  This version was chock-full of great new features including parameter actions and vector mapping.  One feature that has not received nearly as much press is collapsible containers.  In my opinion, collapsible containers have the potential to completely changethe user experience and change the way we design dashboards.  

First, What is a Collapsible Menu?

Collapsible menus are everywhere.  They are in Word and Excel where you can collapse the menus at the top of the screen:

These collapsible menus are also very common on websites that have been optimized for smartphones due to limited real estate.  If you go to Tableau’s website on your phone, you will see one of these collapsible menus (this one is often referred to as a hamburger menu).  When you click it, it opens up a new set of options and when you click the X, it collapses. 

As of version 2019.2, collapsible menus can be created in Tableau using collapsible containers.  A collapsible container is a container that can be opened or closed using a button.  The container must be floating; tiled containers cannot be set to be opened and closed. 

Brief History of “Collapsible Containers” in Tableau

Although collapsible containers are built into the functionality of Tableau 2019.2, it was possible to create them in previous versions.  Several years ago, Robert Rouse developed a method of building these collapsible containers in Tableau.  It’s the work of a complete genius, however, it is quite time-consuming to build and you have to have very strong technical skills to build it. 

The introduction of dashboard navigation buttons in late 2018 certainly helped make so many things simpler.  In that version, all you had to do was to create a duplicate dashboard, make your changes on that duplicated dashboard, then use a button to navigate back and forth.  To be clear, this technique may not be the most optimal for your situation, but it only takes a couple minutes to build and it has so many applications.  My dashboard navigation blog post takes you through how to do this. 

But now, things are so incredibly simple as collapsible containers are built right into the software and are incredibly easy to create.

How Do I Create a Collapsible Container?

Float a container onto your dashboard (it must be floating; it cannot be tiled).  Make sure your floating container is selected then click Layout at the top / left and change the background color to something opaque (something other than none) so that you can easily see it (you can leave it as transparent if you choose, but I rarely do so).  Once again, make sure the container is selected, click the carrot, and choose to “Add Show/Hide Button”.  This will add a small X button to your visualization that is floating by itself.  Try clicking it (if in presentation mode, you can just click it, but if in design mode, you’ll need to press and hold ALT while you click it).  When you press the X, you’ll see the container disappear and the button will change to a hamburger menu (three horizontal lines).  When you click the hamburger menu, the container will reappear. 

You can change the X and the hamburger menu buttons to use any image you like.  I typically create buttons in PowerPoint using a rounded rectangle and text (and sometimes an icon).  (See my blog post on drawing in PowerPoint if you need assistance).   You’ll need two buttons, one to use when the container is hidden (which will open it up) and one to use when it showing (which will close it down).  Therefore, I created two buttons, one labeled Open and another labeled Close. 

Select the X or hamburger button, click the carrot, and select Edit Button.  When you do so, you will see a window similar to the following.  There are several options, but let’s just set the Button Type to Image Button and then look at the Button Appearance section.  Here you will see two options, Item Shown and Item Hidden.  Select Item Hidden and upload the button you want to use when the container is not showing (in my case, Open).  Next, click the Item Shown button and upload your other image (in my case, Close).  Click OK and your buttons will be updated.  Be sure to size them appropriately. 

Now, go ahead and tile a sheet inside the container then toggle through the buttons to ensure it is working properly.

Use Cases for Collapsible Containers

Now that we have the understanding of what collapsible containers are and how to create them, let’s look at some use cases.  Before moving on, please note that I have seen some cases where text doesn’t render properly within the collapsible container.  I have confirmed that Tableau is aware of this and is working to resolve it.  As a workaround, I typically take a screenshot of the text, save it as an image (in PowerPoint) and bring it into the container as an image. 

Personally, I’ve been using collapsible containers for all kinds of things in both my professional and personal work.  This blog post contains a dozen different use cases with details of how to create them.  It is very simple to build the majority of these, so in most cases I will simply break down the general steps of how to build each one.  The details below will reference my Cases for Collapsible Containers workbook available on Tableau Public.  Please open (or even download) this workbook in order to properly follow along with the blog post. 

The Tableau workbook provides thumbnails associated with each use case / example.  Click on the thumbnail to be taken to the specific example.  Most of the examples shown are built right into the aforementioned workbook using a sample dashboard that I created.  However, some of the examples were built by others in the community.  Examples built by me will link you to another dashboard within the same workbook.  Examples built by others in the community will link directly to their workbooks published on their Tableau Public pages.  All works are being used with the original author’s permission. 

Okay, let’s get to it!

1. Hide / Show Filters & Parameters

The first use case for collapsible containers is to hide and show filters or parameters.  The idea is to reserve space on your dashboard for the most important elements (as dashboard real estate is often hard to come by) and allow the user to choose when to show filters or parameters (especially if there are a large number of them). 

When following along in the workbook, click on the thumbnail and you will be taken to my sample dashboard.  You will see a button at the top / right labeled “Show Filters & Parameters”.  Click that button.  When you do so, a collapsible container will appear that includes several filters and parameters.  You can make adjustments to the filters and parameters, then click the Close button to close the window. 

So how do we create this? 

1. Float a container
2. Make the background of the container light gray.
3. Add a border around the container.
4. Click to Add Show/Hide Button.
5. Change the Item Hidden button.  I used a button I created in PowerPoint labeled “Show Filters & Parameters".
6. Change the Item Shown button.  I used a button I created labeled “Close Filters Window”.
7. Tile your filters and parameters into the floating container.

That’s it!  Now you are allowing the user to choose when to show the filters and reserve real estate.

Sam Parsons recently built a sample business dashboard that uses this technique very well.  He does a great job of removing clutter.  Click here to go to the viz.  At the bottom right, you will see a hamburger menu; click on it.  Next, click on the tools icon that appeared.  When you click on this icon, a collapsible container that includes several filters and parameters will appear. 

2. Sheet Swap

There are numerous ways to swap out one sheet for another (or one chart for another).  The standard way is to use a parameter.  My favorite blog post related to this is from TheData School.  I recently took this one step further to show you how to do it with parameter actions using buttons.  All of that said, collapsible containers make this easier than ever before!

When following along in the workbook, click on the thumbnail to be taken to the sheet swap example within the workbook itself.  Okay, how do we create it?

1. In this example, we are going to swap out the hex map with a city map.
2. Add the hex map sheet to your dashboard.
3. Float a container and completely cover the hex map with that container.
4. Change the background color to white.
5. Click to Add Show/Hide Button
6. Change the Item Hidden button to be a button labeled “Change to City Map”. 
7. Change the Item Shown button to be a  button labeled “Change to Hex Map”
8. Tile your city map sheet within the floating container.

There you have it!  The easiest and most-efficient sheet swap ever!

3. Instructions & Additional Info

Historically, many of us have added information icons to our dashboards to provide instructions and other pertinent information to our users.  I’ve typically done this with a “chart” that shows a simple information icon with text in the tooltip.  However, this generally limits us to just text and nothing else (unless we were to build in some sort of viz in tooltip).  We can now use a collapsible container with a button to provide much more detailed instructions and visuals and do so in a much more efficient manner.

When following along in the workbook, click on the thumbnail and you will be taken to Dinushki DeLivera’s Firebird Suite IronViz Entry (an amazing viz that earned her a second IronViz top ten in 2019).  At the top right, you will see a button labeled “Instructions”.  When you click on this, you will be provided with some of the most detailed instructions I’ve ever seen – she even refers to it as an Instruction Manual.  It includes both text and screenshots and breaks down exactly how to read / understand her visualization.

How would you build this?  In Dinuski’s case, she took a screenshot of her viz, brought it into PowerPoint, and then created this amazing “Instructions Manual”.  You can do it the same way if you like or you can use any combination of text, images, charts, etc. tiled within that single floating container.  You can build an entire instructions dashboard within your floating container if you like. 

1. Float a container.
2. Change the background color to a color of your choosing.
3. Click to Add Show/Hide Button
4. Change the Item Hidden button to be a button labeled “Instructions”. 
5. Leave the Item Shown button to be the standard X.
6. Tile the elements of your instructions (whatever they might be) within the floating container (in Dinushki’s case, she just tiled the image she created in PowerPoint).

How much better is this than an information icon with tool tip?!!

4. Map Zoom Window

In Jeff Shaffer’s Map Zoom viz, he allows the user to click on a point to zoom to a certain radius around that point.  He highlights that area with a highlight circle.  The main viz is a map with a dark background, but he provides additional context by allowing the user to see a satellite view, which…of course…uses a collapsible container (see the left hand side of the visualization).  The great thing is that it not only provides a satellite view, it provides that satellite view for that same zoomed in area. 

How is this done?  Well, one key is that you get the zooming filter set up properly.  To do this, I’d recommend that you read Jeff’s full blog post.  In that blog post he talks about the technique to filter down to a certain radius around the selected point then he draws a circle to highlight that radius.  The same filtering technique is used on the satellite map (you do not need to draw the highlight circle, however). 

1. Create a satellite map using Tableau’s new satellite map style.
2. Apply the filters you built with Jeff’s technique to the satellite map.
3. On the dashboard, float a container.
4. Click to Add Show/Hide Button
5. Change the Item Shown and Item Hidden buttons as you like (Jeff used a button labeled Satellite View for both Shown and Hidden).
6. Tile the satellite map into the window. 

Now you give the user the ability to explore the selected area in much greater detail. 

5. Show All Window

In this example, we are showing the top 10 most profitable states.  Let’s say we wanted to allow the user to see all 50 states quickly…well, we could use a collapsible container.  In order to see it in action, click the Show All States button at the bottom right side of the viz.  (Please note that in this example, we are actually going to duplicate the Profit by State sheet.  This is generally not recommended, but simply used as an example.  I’ve used this technique for many other use cases that did not require duplicating a sheet). 

1. Duplicate the Profit by State sheet and remove the top ten filter.
2. Float a container.
3. Click to Add Show/Hide Button.
4. Change the Item Shown and Item Hidden buttons as you like.
5. Tile the duplicated Profit by State sheet into the container. 
6. Add borders and background color as you wish.  In my case, I added a blue border and white background to the container.

Now your user can obtain additional information at the click of a button.

6. Notifications & Exceptions

There are many times in which you will want to notify your customer of certain issues or exceptions.  I have a full blog post coming soon that explains how to truly notify your customers that their action is required.  Please be on the lookout for that blog post.  This particular piece will only focus on the collapsible container piece.  (Again, please follow along in the corresponding workbook).

1. Create a sheet that shows the notification or exception information.  In my case, it is simply a table of information.
2. Float a container.
3. Click to Add Show/Hide Button
4. Change the Item Shown and Item Hidden buttons as you like.
5. Tile the exception sheet in the floating container. 
6. Add borders and background color as you wish.  In my case, I added a blue border and gray background to the container.

Please be on the lookout for my full blog post that goes into much more detail on how to truly notify your customers that their action is required. 

7. Search Window

I recently published my Tableau Chart Catalog, which shows 100 different chart types built by 74 different authors.  All charts were built in Tableau, published to Tableau Public, and are downloadable.  In order to show 100 charts, the dashboard had to be quite long.  I wanted users to be able to search for a chart type without scrolling up and down repeatedly.  To address this need, I added a search button (see the top right of the viz).  So how do we do this?

1. Duplicate the sheet that will be used in the search (I duplicated my main sheet showing all 100 chart types) and add a filter to allow just a single value.  Show the filter.
2. On the dashboard, float a container.
3. Click to Add Show/Hide Button.
4. Change the Item Shown and Item Hidden buttons as you like.
5. Tile the sheet into the container.  Also, tile the filter into the container. 
6. Add borders and background color as you wish.  In my case, I added a blue border and white background to the container.

8. Lightbox Feature

Many websites use a technique that we, at work, refer to as a light box.  A light box highlights one area while graying out the rest.  Below is an example from Amazon’s website.  The Account & Lists sections is the light box while everything in the background is grayed out. 

We originally discovered this technique from a 2018 Tableau Community Forum post from Alison Whitaker.  My colleague, Dinushki Delivera put it into action using a duplicate dashboard and a dashboard button and I have now adapted it to use a collapsible container. 

This is similar to the Show All technique we discussed above, but this allows us to really focus our users’ attention on one very specific chart.  For this example, we will be using the same Show All dashboard and buttons we used before.  Before reading how to do this, take a look at the viz first first.  Click the Show All States button at the bottom right.  You should be able to see how the design focuses the user’s eyes on that one central chart. 

Okay, how do we do this?

1. As in the Show All example, we will duplicate the Profit by State sheet and remove the top ten filter (if you already did this, you will not need to do it again…just use that same sheet.).
2. Float a container.
3. Using the Layout control at the top left, change the X and Y positions to 0 and 0.  Make the width and height the size of the dashboard.  In this case, the height and width are set to 1200 and 850 respectively. 
4. Tile your duplicated Profit by State sheet into the container.
5. Within the same container, tile a blank text box to the left of the sheet and another one to the right of that sheet.
6. Again using layout, change the background color of the left and right text boxes to be gray and set the Opacity to 70% (or so).  This will create a dulling effect for the background.
7. Remove all Outer and Inner padding all the text boxes and the sheet.
8. Click the container to Add Show/Hide Button.
9. Change the Item Shown and Item Hidden buttons as you like.

The result is a very nice way to provide your user with additional information quickly, while removing distractions. 

9. Stackable Charts

Recently, Daniel Caroli created a visualization using Superstore data (which he creatively rebranded as the BnL Corporation from the animated movie Wall-E) to showcase collapsible containers (click the button in my viz to go to his viz). 

In this viz, he utilizes what I call “Stackable Charts”.  He gives the user three different metrics then provides three different ways of viewing these metrics.  The data is not as important as his design.  He layers the charts on top of each other.  He also does an incredible job at designing several different types of buttons (all of which can be created in PowerPoint) that make it very clear what is selected and what is not.  It’s very well done.

Building this is easy and requires no other techniques aside from what we’ve already discussed, other than the fact that we will layer the charts.

1. On the dashboard, float a container.
2. Click to Add Show/Hide Button
3. Change the Item Shown and Item Hidden buttons as you like (as mentioned, he created a variety of buttons that make it easy to tell if that option has been selected).
4. Tile a sheet into the container. 
5. Add borders and background color as you wish.  Daniel used a white background with a thin border matching the color of the header.
6. Make sure the first container is showing then follow the above steps again, but overlay this second container on top of the first one and place the second button next to the first one.
7. Do this a third time again overlaying the container and placing the button next to the second button. 
8. Ultimately, Daniel had three sets of three containers/buttons for a total of nine containers/buttons. 

This is a great example of how to allow your user to interact with his/her data while conserving dashboard real estate. 

10. Background Color

I’ve seen numerous techniques that allow users to modify the background color of their viz (see Color Theming from Ken Flerlage and DynamicBackground Color from PradeepKumar & Rajeev Pandey), but this is the EASIEST METHOD EVER! 

Before we build it, try it in my example dashboard.  Simply click the Change Background Color button and the background changes to black.  Click it again and it toggles back to white.  This is so easy to build.

1. On the dashboard, float a container.
2. Click to Add Show/Hide Button.
3. Change the Item Shown and Item Hidden buttons as you like.  I used the same button for both “Change Background Color”.
4. Select the container and use the Layout control at the top left to change the X and Y positions to 0 and 0.  Make the width and height the size of the dashboard.  In this case, my height and width are 1200 and 850 respectively. 
5. Change the background color of the container to black.
6. Now change the floating order and send this container to the back.
7. Finally, make sure that all the sheets on your dashboard are set to have no background color (i.e. transparent). 
8. Now simply click the button to change the background color. 

Using this technique, you can build a dynamic color theme in about one minute!

As a side note, you really don’t even need the container to do a background color swap.  You could actually just use the buttons themselves!  (The following is not shown in the sample workbook).

1. Float a container and move it off the dashboard completely. 
2. Add buttons.  One would be white and one would be black (you could create them in PowerPoint). 
3. Make the buttons the size of the dashboard and float them to the back. 
4. Now, instead of clicking on a button to change the background color, you could just click on the background itself (which is, in fact, a button) to change the background color. 

The concept of using the buttons themselves without a container may have some really cool applications. 

11. Control the Story & Guide Your User

In my IronViz Music entry, I told the story about Napster and its tremendous effects on the recorded music industry.  I had to use a lot of text to truly tell the story.  My concern was that the sheer number of words would immediately turn off readers.  I wondered how I might “control the story”; how might I only show small sections at a time to allow the user to digest the information then move on.  I played around with collapsible containers and found that they were the perfect solution to my problem. 

Check out the viz and scroll down a bit until you see the “Continue Reading” button (note that at the top, I also use a collapsible container for a sheet swap).  When you click that button, another set of text, images, and charts appear.  Alongside that information is another “Continue Reading” button.  This continues until the entire story is unveiled. 

This technique will allow you to control the story as I did.  However, it will also give you the ability to guide your user through a viz, or provide the user with step-by-step instructions much like ChrisLove's London Neighborhoods viz.  Note that Chris used parameter actions, but you could use collapsible containers in a similar way.

Okay, how do you build this?  For this example, I am going to speak in general terms of how I did it (not necessarily explaining to you how you would do it – though they are one in the same). 

1. First, I floated a container with some text and a chart tiled within.
2. I then floated a second container containing some text, a chart, and some images.
3. On the second container, I set it to Add Show/Hide Button.
4. I set the Item Hidden button to be a button I drew in PowerPoint, which was labeled “Continue Reading”.
5. For the Item Shown button, I added a transparent square (so it could not be seen).
6. Now here is the trick of it all, I took that button and tiled it within the first container…the previous container. 
7. Next, I floated a third container, added images, text, and charts.  I again set it to Add Show/Hide Button, added the Continue Reading and transparent buttons.  Once again, I tiled these buttons within the previous container (the second container).
8. I did this 8 times.
9. Now when a user looks at the viz, they see just one Continue Reading button.  This continue reading button.  When they click on it, it opens up the next container. 
10. That container includes the Continue Reading button for the next container and so on. 

12. Warning Button (fun!)

Okay, the last use case looks at my recent SportsVizSunday viz that used some radial charts using polygons to show the winning percentage for the past 25 years for the NCAA football top 25 teams.  The charts were pretty and you could draw some insight from them, but I wanted to be sure that people didn’t misinterpret this as best practice.

To do so, I added a collapsible container that included a warning message (and a better chart for the job) and created a button simply said “warning”.  However, I did’t think it captured the attention well enough and thought it was incredibly important that people read this warning. 

I slept on it and if you’re like me, this stuff rattles around in your brain for hours before you can sleep.  Then eureka…I could make the button flash!  Okay, now I have the solution to the problem, how do I make a button flash?  Here’s what I did.  (I will also explain, in general terms, how I used a GIF in this viz). 

1. In PowerPoint, I created a slide and drew the following image:
2. 
3. I duplicated the slide and changed this image slightly to look like the following:
4. 
5. I opened up ScreenToGif.  This screen recording software exports video in the form of a GIF.  (This program is very simple to use and I recommend you download it). 
6. I selected a window to record in ScreenToGIF, and then recorded me toggling between these two PowerPoint slides.
7. I ended the recording and exporting the video to a gif.  I then hosted that GIF to my website.  (Jeff Shaffer wrote about this technique several years back and he has used it in numerous dashboards, including his recent VOTD: Age of Cincinnati Buildings.  Before moving on, please read his blog post). 
8. I hosted it on a page that cannot be accessed unless you have a link…click here to go to that link.
9. Although I hosted it on my website, you can host your GIF just about anywhere.  I recommend using https://imgur.com (you will need to sign up) and just uploading your image.  If you’d prefer not to do that, I would be happy to host your GIF on my page. 
10. Ultimately you will bring this into Tableau as a web page object, but before you do so, you need to grab the proper link…the URL linked above is not the correct link.  You must use the actual URL for the image alone.  To do this, click on the GIF on my website (it should bring it to the front as sort of a light box like the one I showed before), right-click and choose “Copy image address”.  This should work the same general way regardless of where you host it. 
11. Now in Tableau, bring in a Web Page object and paste in that URL.  You should now see a flashing GIF.
12. Now onto the collapsible container.  I floated a container on the dashboard and within it, I tiled some charts and text. 
13. I set it to Add Show/Hide Button.
14. I changed the Item Hidden button to be a transparent rectangle.  This allowed the flashing GIF to show through, although my container button was actually on top of it.
15. I changed the Item Shown button to a close button with an opaque (white) background (that I, of course, created in PowerPoint).  Since its background was opaque, it covered the flashing GIF so that it could not be seen.
16. When a user goes into the dashboard, they see the flashing warning because a transparent container button is on top.  When a user clicks it, the container opens, and the opaque button is shown, covering the GIF, and making it appear to have stopped flashing (truth is, it’s still flashing behind that button).  

So that’s a little fun application for you.  If you ever want to use this flashing button, feel free to do so.  Just use the following link within a web page object: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlgL7CXvJFbxtBHYGIMq5VH8Pw3xzSbT2D6sJ0VrNSPfhyphenhyphenYS1X81tbnbWwn1g71d2ibwK7drET2VmbcSn845n00d1wL1bw__lCLJg5NKBA7AIT6bjCDgnpKhlYY45WDaI_kJEX9XTBvg/s1600/Warning+GIF2.gif

As a side note, my colleague, Dinushki Delivera used this exact technique in a business dashboard one day after I finished writing this blog post.  She did not use a GIF, but she used an image, with transparent button, and an opaque “close” button.  I won’t go into details, but this was the perfect solution to her problem.

Wrap Up

Collapsible containers have so many use cases.  It truly makes so many things easier from the developer perspective, but more importantly, it can greatly enhance the user experience for our internal and external customers.  I’m sure the community will come up with many more ideas and I can wait to see them.  And one last time, you can click the image below to to go the the corresponding viz.

Thanks to the folks that allowed me to link to their work and thanks for reading.  As always, please feel free to contact me at any time with comments or questions. 

Edit 07/13/20: In Aug of 2019, I presented to Viz Connect where I spoke about collapsible containers as well as other 2019.2 features.  You can view that video here:

Kevin Flerlage, Sep 2, 2019 | Twitter | LinkedIn | Tableau Public