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 change
the 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 navigationblog 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?

Float a container

Make the background
of the container light gray.

Add a border around
the container.

Click to Add
Show/Hide Button.

Change the Item
Hidden button. I used a button I created
in PowerPoint labeled “Show Filters & Parameters".

Change the Item
Shown button. I used a button I created
labeled “Close Filters Window”.

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?

In this example, we are going to swap out the hex map
with a city map.

Add the hex map sheet to your dashboard.

Float a container and completely cover the hex map with
that container.

Change the background color to white.

Click to Add Show/Hide Button

Change the Item Hidden button to be a button labeled “Change
to City Map”.

Change the Item Shown button to be a button labeled “Change to Hex Map”

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’sFirebird 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.

Float a container.

Change the background color to a color of your choosing.

Click to Add Show/Hide Button

Change the Item Hidden button to be a button labeled
“Instructions”.

Leave the Item Shown button to be the standard X.

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).

Create a satellite map using Tableau’s new satellite map
style.

Apply the filters you built with Jeff’s technique to the satellite
map.

On the dashboard, float a container.

Click to Add Show/Hide Button

Change the Item Shown and Item Hidden buttons as you like
(Jeff used a button labeled Satellite View for both Shown and Hidden).

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).

Duplicate the Profit by State sheet and remove the top
ten filter.

Float a container.

Click to Add Show/Hide Button.

Change the Item Shown and Item Hidden buttons as you
like.

Tile the duplicated Profit by State sheet into the
container.

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).

Create a sheet that shows the notification or exception
information.In my case, it is simply a
table of information.

Float a container.

Click to Add Show/Hide Button

Change the Item Shown and Item Hidden buttons as you
like.

Tile the exception sheet in the floating container.

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?

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.

On the dashboard, float a container.

Click to Add Show/Hide Button.

Change the Item Shown and Item Hidden buttons as you
like.

Tile the sheet into the container. Also, tile the filter into the
container.

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.

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?

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.).

Float a container.

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.

Tile your duplicated Profit by State sheet into the
container.

Within the same container, tile a blank text box to the
left of the sheet and another one to the right of that sheet.

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.

Remove all Outer and Inner padding all the text boxes and
the sheet.

Click the container to Add Show/Hide Button.

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.

On the dashboard, float a container.

Click to Add Show/Hide Button

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).

Tile a sheet into the container.

Add borders and background color as you wish. Daniel used a white background with a thin
border matching the color of the header.

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.

Do this a third time again overlaying the container and
placing the button next to the second button.

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.

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.

On the dashboard, float a container.

Click to Add Show/Hide Button.

Change the Item Shown and Item Hidden buttons as you
like. I used the same button for both
“Change Background Color”.

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.

Change the background color of the container to black.

Now change the floating order and send this container to
the back.

Finally, make sure that all the sheets on your dashboard
are set to have no background color (i.e. transparent).

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).

Float a container and move it off the dashboard
completely.

Add buttons. One
would be white and one would be black (you could create them in PowerPoint).

Make the buttons the size of the dashboard and float them
to the back.

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'sLondon 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).

First, I floated a container with some text and a chart
tiled within.

I then floated a second container containing some text, a
chart, and some images.

On the second container, I set it to Add Show/Hide Button.

I set the Item Hidden button to be a button I drew in PowerPoint,
which was labeled “Continue Reading”.

For the Item Shown button, I added a transparent square
(so it could not be seen).

Now here is the trick of it all, I took that button and
tiled it within the first container…the previous container.

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).

I did this 8 times.

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.

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).

In PowerPoint, I created a slide and drew the following
image:

I duplicated the slide and changed this image slightly to
look like the following:

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).

I selected a window to record in ScreenToGIF, and then
recorded me toggling between these two PowerPoint slides.

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).

I hosted it on a page that cannot be accessed unless you
have a link…click here to go to that link.

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.

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.

Now in Tableau, bring in a Web Page object and paste in
that URL. You should now see a flashing
GIF.

Now onto the collapsible container. I floated a container on the dashboard and
within it, I tiled some charts and text.

I set it to Add Show/Hide Button.

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.

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.

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).

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.