Tabs in online documentation

Tabs provide a way to organize information by specific categories and display only one of these categories at a time. This organizes information and reduces the amount of information visible at any given moment. As a result, readers are less likely to feel overwhelmed and can better focus on what is relevant to them.

This can be implemented in online documentation either purely with the means of CSS or with a combination of CSS and JavaScript.

Example

The following solution is a pure CSS solution without the use of JavaScript. When you shrink the browser window, the tabs become an accordion. Try it!
 

Implementation

The core of the solution is based on a proposal by Louis Lazaris on the codeinwp page. Internally, it uses a group of radio buttons, which are not apparent as such.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.csstabscontainer .csstabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 20px;
}
.csstabscontainer .radiotab {
  position: absolute;
  opacity: 0;
}
.csstabscontainer .label {
  width: 100%;
  padding: 12px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  border: solid 1px rgb(235,235,235);
}
.csstabscontainer .radiotab:checked + .label {
  background-color: rgb(247,247,247);
}
.csstabscontainer .panel {
  display: none;
  padding: 20px 30px 30px;
  width: 100%;
  background-color: rgb(247,247,247);
}
.csstabscontainer .radiotab:checked + .label + .panel {
  display: block;
}
@media (min-width: 600px) {
  .csstabscontainer .panel {
    order: 99;
  }
.csstabscontainer  .label {
    width: 150px;
    border: none;
  }
}

Step 2: In addition, you need an HTML snippet before and after the content of each tab.

> Put this HTML snippet in front of the first tab:

<div class="csstabscontainer">
 <div class="csstabs">
  <input class="radiotab" name="csstabs" type="radio" id="csstab1" checked="checked">
  <label class="label" for="csstab1">Responsive Tab 1</label>
  <div class="panel">

> Between all other tabs, put the following HTML snippet, adjusting the values for id="..." and for for="..." as well as the text respectively.

  </div>
  <input class="radiotab" name="csstabs" type="radio" id="csstab2">
  <label class="label" for="csstab2">Responsive Tab 2</label>
  <div class="panel">

> Put the following HTML snippet after the last tab:

  </div>
 </div>
</div>

Other examples

In most cases, a purely CSS-based solution like the one in example 1 is likely to be the simplest and best option. JavaScript-based alternatives are provided, for example, by the libraries vanilla-tabs or Easy Responsive Tabs to Accordion. The results look as follows, depending on the styling. For implementation, please refer to the information given in the documentation of the respective library.

Implementation with vanilla-tabs:
 

• This is the content of tab 1.

  ##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ########

  Anything can go here.

  

• This is the content of tab 2.

  ##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############ ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### #####

• This is the content of tab 3.

  ##### ###### ###### ######## ## ###### ######## ### ####### ####### ### ######## ########## ########### ### #### ######## ## #### ### ###### ########### ###### ##### ## ##### ### #### #### ########### ######## ############

  ### ###### ########## ##### ###### ####### ### #### ##### ##### ######### #### ### ##### ######## ########## ##### ##### ######## ####### ### ######### ##### ##### ####### ##### ####### ###### ######### #### ####### ### #### ###### ##### ####### ### ######## # ######### ##### ############ #### ####### #### ##### ### ######### #### #########

Implementation with Tabs to Accordion:
 

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.