Expandable sections in online documentation (dropdowns, toggles)

Not displaying all content in detail from the beginning can make even a long topic look very clear. Many authoring tools already provide built-in functions for this under names such as "dropdowns", "toggles", "collapsibles" or similar. But even if your authoring tool does not explicitly support this, it can be implemented in an online documentation – even without the use of JavaScript.

Tip: Dropdowns or toggles are also useful in a tutorial to initially hide the answers to control questions.

Example 1

This solution uses the <details> HTML element, which was created specifically for hiding content. Try it out and click the toggle:

Toggle me, please

This content is hidden by default. Users only need to read it in case they decide to expand the toggle.

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

Bridge the knowledge gap

Implementation for example 1

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:


summary {
  font-size: 18px;
  font-weight: 700;
  cursor:pointer;
  outline: none;
  margin-bottom: 20px;
}
	
summary::marker {
  content:  " + "; 
  color: #006699;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.5s;  
}
	
details[open] summary::marker {
  content:  " – ";
  color: #006699;
}

The styles in here define the appearance of the clickable text.

Note: If you omit the two entries for summary::marker, the user’s browser uses a default symbol (usually a filled triangle in text color).

Step 2: Enclose the content that is to be initially hidden when the topic is displayed in the following two HTML snippets:


<details>
 <summary>Toggle me, please</summary>


</details>

Example 2

For a grouped display, the following formatting is also suitable, for example. There is a subtle animation for fading in. In addition, the plus sign rotates and turns into an x.

Toggle 1

##### ##### ##### ### ####, ## #### ######## ###. ##### ###### ######## ### ##, ## ### ########## ############. ## ### ###### ###### ########, ## ### ###### #######. ## ### ###### #########, ###### ########## ### ##.

Toggle 2

Toggle 3

Toggle 4

Implementation for example 2

In this case, replace the CSS code from example 1 with the following code:


details[open] summary ~ * {
 animation: open 0.5s ease-in-out;
}
@keyframes open {
 0% {opacity: 0;}
 100% {opacity: 1;}
}
details summary::-webkit-details-marker {
 display: none;
}
details summary {
 width: 100%;
 padding: 0.5rem 0;
 border-top: 1px solid black;
 position: relative;
 cursor: pointer;
 font-size: 1.20rem;
 font-weight: 300;
 list-style: none;
}
details summary:after {
 content: "+";
 color: black;
 position: absolute;
 font-size: 1.60rem;
 line-height: 0;
 margin-top: 0.75rem;
 right: 0;
 font-weight: 200;
 transform-origin: center;
 transition: 500ms linear;
}
details[open] summary:after {
 transform: rotate(45deg);
 font-size: 1.80rem;
}
details summary {
 outline: 0;
}
details[open] {
 margin-bottom: 30px;
}

___

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!