This guest post was written by Laura Charles Johnson, the documentation team manager for MicroStrategy. In her role, Ms. Johnson’s favorite responsibility is to turn junior writers into power Flare users. She’s done that with 9 writers so far. Ms. Johnson has used Flare since version 1 and is a certified Advanced Flare Developer and trainer.
Using tabs in your Flare topics is a great way to layer information on a page, and progressively show content to the reader. The user requests content to be displayed by clicking (or perhaps hovering over) the content’s corresponding tab.
First, let’s look at how tabs look in production. Here’s the default state.

And here’s another tab in its hover state.

To try it yourself, go here.
To make these tabs work, there are three pieces involved and I will explain each one.
- HTML
- CSS
- Javascript
HTML
For those of you familiar with Codepen, here’s a pen with all the code you need: https://codepen.io/LCJohnson/pen/XWWeLNR
If you’re not familiar with CodePen, let’s talk. It’s a pretty awesome tool for writing and testing code before you put it in MadCap Flare. When you open the Codepen link, you’ll see the following:

The first section of the code is the <ul> that allows you to create the tab labels.

These labels should include text that you would like to have displayed as the title of each tab (i.e., “Product Documentation”, “Video Tutorials” and “Knowledge Base Articles”).

The second section is where you will place content to appear when you click on a different tab.

Each div tag contains the content of a tab.
The content inside the <div> tags are what you want to put inside each tab. For example, when a user clicks on the “Product Documentation” tab, the following content within the red box will appear.

Ok, let’s talk about the parts of the code.
The Unordered List
First, we want to give the <ul> tag a style class because its behavior will be different from all other <ul> tags in the project. This <ul> will have a class named ‘tabs.’

Next, we want to make sure that each <li> tag, or tab label, has its own ‘data-tab’ designation. You need this for the JavaScript. I went the easy route and just named each one ‘tab-1,’ ‘tab-2,’ etc. Keep in mind that you want this to be generic so you can use this tab code wherever you want throughout your projects.

Next, you’ll see that each <li> shares a class, ‘tab-link,’ but the first <li> has a 2nd class, ‘current.’ It’s a tag with multiple classes. If you’ve not come across tags with multiple classes, that’s ok. It happens all the time and browsers are fine with it.


The ‘current’ is important because it tells the browser which tab and which tab content to open first.
The <Div> Tags
After you have your <ul> created, we can move on to the <div> tag. Each <div> has the ‘tab-content’ class applied because we want to make sure that the behavior is separate from any other <div> tags.

Don’t forget that one of the <div> tags needs to have the ‘current’ class assigned so the browser knows to show that content when the page loads.

Next, you’ll notice that each <div> tag has its own ID and that it is identical to the data-tabs in the <li> tags that we looked at a few minutes ago. This is key because it tells the browser which <div> is associated with which tab. So, whatever you name them, make sure they match between the <li> tags and the <div> tags.

Last is the tab content. In this example, the contents of the tab are surrounded by a <p> tag. But you could put anything here like I did in the second tab.

I’ve added the following:
- A Flare dropdown
- An ordered list
- An image
- A video
So, consider the tab content a container where you can put absolutely anything you’d put in a topic – although you should avoid H1s because there should only be one of those per topic/web page.
Let’s look at our tabs right now in CodePen. That’s the cool thing about CodePen, it renders your code instantly, so you can perfect it before adding it to Flare and having to build your project every time. (Super time saver!!).

Yeah, that’s boring and certainly does not look like tabs! But, we have the code (AKA the skeleton) in place. Now we have to add some muscle (JavaScript) and skin (CSS).
JavaScript
Here’s the JavaScript file that we have in our js folder located in our Resources folder. You may not have a js folder since it’s not a default folder in a Flare project. You should create one now.

To create a .js file, open your favorite code editing tool (Notepad++ is a great choice). Copy the code in the .js section of the Codepen I provided and paste it in a new file in Notepad++. Save it as a .js file to the Resources > js folder that you’ve created and it will be ready for use.

Don’t be intimidated if you’re not familiar with JavaScript. When I open the file, this is all there is. I’ll explain what it does next.

Long story short, this code tells the browser to remove the ‘current’ class from the default tab and add it to whichever tab is clicked next. When the user clicks on a tab other than the one open, this JavaScript tells the browser to close the open tab content and open the clicked-on one…and to move the ‘current’ look and feel from the previous tab to the clicked-on one.
What do you actually need to know to make the tabs work?
Simple: just add this line of code in the <head> of your masterpage:

We have a lot of custom code in the head of our masterpage, so you likely won’t be adding this to line 113. Don’t panic if you’re on line 4!
You’re good to go! It will just sit there not bothering anything until you add tabs somewhere. You are done with the JavaScript part of this. YEAH!
We’ve now added the muscle…now let’s add the skin, AKA the CSS.
CSS
I don’t want to freak you out…but the CSS for this is a bit long. I have it at around 80 lines long including nice spacing and comments at the beginning and end.
(Again, the code is available in my CodePen to just copy and paste into your stylesheet.)
Let’s start at the beginning. I’m not going to discuss every line – just the ones that aren’t your every day CSS and are important to the look and feel of the tabs.
Important note: as you build this in Flare, you’ll likely be checking out the topic via the XML Editor. It will not look right and it definitely won’t work (that’s why I really recommend using Codepen first). Do not panic. This is to be expected. If your page looks kind of like this, you’re golden.

OK, let’s have some CSS fun.
*Tip: When you’re ready to add this to Flare, I recommend opening your stylesheet in the internal text editor or in your favorite code editor. This isn’t a requirement, but it does make adding blocks of CSS much easier and faster. To open the internal text editor in Flare, right-click on your stylesheet and select Open with > Internal Text Editor. Copy and paste the CSS from Codepen into your stylesheet.
First, we need to remove the bullets from the list. List-style:none makes that happen.


Now we want to make the list shift from vertical to horizontal, make a pointer appear when someone hovers over a tab, change the color, and add some padding between each list item. To do this, I added the following:

Now our tabs are looking a little more like tabs.

And you’ll see a pointer appear when you hover over a tab.

Next, we want the ‘current’ tab to have its own look. To my ‘current’ class, I added the following:


Now I want a faint gray line to appear under the non-current tabs. So I’ll create an :after selector with the color.

Here’s the line. Notice how it only appears under the closed tabs. It makes the current tab look open.

That’s great – but I still see all the content from all tabs. I only want to see tab 1 content. Let’s do that next. The trick here is the display:none. It makes everything with the class of .tab-content disappear.


I’ve taken it a little too far because now even the tab 1 content is missing. But Progress! Let’s put tab 1 content back in. That’s where that ‘current’ class comes in.

I use display:inherit to make sure that the ‘current’ tab content appears. ‘Inherit’ here essentially discards the display:none of the .tab-content class and, instead, “inherits” the display:block from a parent tag, in this case a <div> tag. Does it sound weird, yes? Does it work, absolutely!
And it’s back!

Now I’ll add some styles for the hover state of the non-current tabs. In this instance, I want the tab to turn gray and the text to be black so there’s still good contrast between text and background. So I’ll create a :hover pseudo-class.

It’s happening!

Now I want to make sure that the ‘current’ tab doesn’t change when someone hovers over it. So I set the .current:hover state to the same settings as .current. That way, nothing changes.

It looks so good!

As you click across, the content should change.
You know what this means? You. Have. Made. Tabs. If this is your first foray into JavaScript, you did great!
Have questions? Post them below.
Laura,
This is terrific.
? please: Is there a way to add this as a style in Flare?
Will reach out to jennifer Morse with the same ?,
Pat
Patricia, what are you looking to add as a style in Flare? Do you mean, add as a feature in Flare?
Hi Laura,
What’s your suggestion for users like me who also have to generate pdf output for all our Flare source files? I imagine we need some corresponding code in the css for print media? Is that all we need to do?
Kim, here’s the CSS to make the tabbed content look right in PDF. Keep in mind that the tabs won’t work as tabs….
And I give credit for the below to Jason Mehaffey, a friend and colleague of mine here at MicroStrategy.
Here’s the CSS:
ul.tabs
{
display: none;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
}
ul.tabs:after
{
position: absolute;
content: “”;
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #ddd;
}
ul.tabs .tab-link
{
color: #333;
display: inline-block;
padding: 10px 10px;
cursor: pointer;
margin-left: -4px;
position: relative;
z-index: 0;
}
ul.tabs .current
{
background: #fff;
color: #d9232e;
margin-left: 0px;
margin-right: 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid white;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
ul.tabs .tab-link:hover
{
background: #c2c2c2;
color: #000;
display: inline-block;
padding: 10px 10px;
cursor: pointer;
margin-left: -5px;
border: 1px solid transparent;
}
ul.tabs .current:hover
{
background: #fff;
color: #d9232e;
margin-left: 0px;
margin-right: 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid transparent;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
z-index: 2;
}
.tab-content
{
display: block !important;
padding: 15px;
background-color: transparent;
}
.tab-content.current
{
display: block !important;
}
Can you share a picture of what your PDF output would look like? From the CSS and HTML example, I’m assuming the tab titles would not be displayed right next to the content block that’s associated with it?
Has anyone gotten the tab titles (in PDFs) to show up?
Great post. Thanks for sharing.
Ellis, you’re welcome.
This is great Laura, and exactly what we’ve been using for overview pages… big question though – if you’re then asked to produce a print output version that includes the content from all tabs, how are you approaching that?
Scott, I posted the CSS for the tabs above. And thank you for the kind words. I’m glad my post helped you!
Laura, this is terrific! I’ve been looking for guidance on adding tabs to my topics and your blog nailed it with all of the detail and screenshots.
While the output works as expected, I get one message in Flare:
CSS: Invalid display: inherit
Any suggestions on how to prevent this from showing up?
Thanks!
Michelle, short answer: we have not figured out how to make the message not appear.
Longer answer: we have a lot of stuff in our stylesheet (specifically flexbox stuff) that earns us messages like this. Our team’s rule: if the build doesn’t break, we ignore these messages.
Oh, and thank you for the kind words on the post. I’m glad this helped you.
Hi Michelle & Laura,
I changed:
.tab-content.current
{
display: inherit;
}
To:
.tab-content.current
{
display: inline;
}
The “CSS: Invalid display: inherit” error stopped appearing. I rebuilt the HTML5 and it appears to work as expected, but I’m not sure if there may be some unintended side effects?
Every thing seemed to work except that I continue to see contents of the three tabs at all times. The
.tab-content
{
display: none;
background: #ededed;
padding: 15px;
background-color: transparent;
Didn’t seem to work. I wonder why?
It’s hard to say without seeing the project. Can you put the content in a Codepen and share it with me? I’d need to see the CSS, HTML, and JS in one codepen.
We are very excited about implementing this feature. I’m implementing this as described and illustrated, with the exception that I have an existing “scripts” folder, so am referencing that in master pages instead. When I open the topic in the XML editor, I get a message: “CSS: Invalid display: inherit.”
When I build I see the three tabs with tab header text. However, I can only see content on the first tab and cannot toggle to the second and third tabs. Any troubleshooting advice?
Hi Daphna,
It sounds like your existing scripts could be interfering with the Javascript that was provided. Some troubleshooting that you can do on your end is to disable the other scripts in your project to see if it allows the other tabs to work. If disabling all of the other scripts allows the functionality to work, you can then enable and disable other scripts until you narrow down which script (or scripts) may be causing the issue.
Hope this helps!
Ah, we definitely need our other scripts for our template customization, so I guess the tab solution won’t work.
Daphna, this message is annoying but won’t affect the behavior of the tabs. We just ignore it.
Hello Daphna. I was having the same issue with not being able to select the second and third tabs. When I put the javascript into the topic itself and not the master page, it worked!
I love this, as a user and a writer. Great use of screen space, and a great way to match the help to the UI when the UI has similar tabs.
My search doesn’t seem to return results from any tabs other than the first though. Am I doing something wrong? Also not sure if there’s a way to link directly to the second or third tab from another topic?
Jennifer, first, my apologies for the delay in replying. I switched jobs and I’ve been underwater with getting acclimated at my new place.
My assumption (that’s all) is that the search reads the HTML code, not the output shown on the browser…so I would expect content on the non-active tabs should appear. However, based on your research, it seems that that is not the case. I’ve not worked extensively with search configuration/customization so I’m unable to assist. Maybe a tech support hero at MadCap can help?
This is really great, thank you. I’ve not had a problem with the search results returning the topic containing the “hidden” content. However, any guidance on how the other issue of how we could link directly to the second or third tab from another topic i.e. override the default displayed tab, would be gratefully received.
Hi, I love this lesson, thank you so much.
I have a question – can I set up the content of the tabs to re-import the latest version of imported material? I’m thinking probably not, but I am creating a site that will have a tab for tech specs, which are maintained in mkdocs. I have to set up the project to always look for the latest version of those files. Could I have them in a tab?
Mary, first, my apologies for my delayed response. New job, new craziness.
Anyway, my guess is that anything you set up IN a tab should behave the same way as if there were no tabs there.
For example, togglers, thumbnail images, hover-over content, etc. all work – so I don’t see why this wouldn’t.
My suggestion is that you try it out (you likely already have) and if things are wonky, contact the folks at MadCap.
Hi
Great post, thank you so much for sharing.
I have a question though, when I build my project to review the tabs, I notice some issues. When searching key content, I note the search results only direct me to the page but do not open directly to the tab it relates to (it defaults to tab 1).
Is there a modification needed to the search to help improve search results?
Me too. Was just about to post the same question. Any suggestions?
Hi Yael,
Have you had any luck in making the search work as per Lani’s question?
I’m sorry – I don’t know how to customize things to make this work. I’m sure it’s possible – through .js or jquery perhaps – I just don’t know how.
Thanks for sharing this Laura! We are planning to implement this soon.
Is there a limit to the number of tab sets that can be added to an HTML page? We’re using tabs for different code examples and found that after two tab sets in the same HTML page, the tab content is not displayed. Thanks,
Hi Laura – this is great! How do you access the tabs from the TOC please? I’m using Side Nav, with H2s and other content in each tab, and nothing I have tried lets the TOC access the tabs. It’s as if the TOC output doesn’t recognize the H2s in the divs. If I pull the H2s out of the divs, the TOC finds them correctly – but then the content is shown in every tab. Did you succeed in enabling the TOC nodes to jump correctly to the tab content? I didn’t see a TOC in your live output.
Best regards,
Yael