Expanding

In several locations of the standard HTML report, information can be displayed or hidden by clicking on an expander. The corresponding HTML patterns, JavaScript functions and CSS can be reused.

Examples:

  • the show more / show less expander for additional information in overview page,
  • the expanders for level 2 information for each level 1 entity,
  • the possibility to show and hide coverage details in source code view.

To include the function of expanding and collapsing, the file Expanders.js is used. In HTML, two elements must be provided:

  1. An expander - any HTML element reacting on the click action.
  2. An element to be expanded. This might be a container for many other elements actually changing their appearance with expanding and collapsing.

The expander is marked with class Expander and has an attribute data-expander-for filled with the ID of the element to be expanded. Expanders.js registers a click event handler for these elements.

On the expander, the state is indicated with the class Collapsed or its absence. On the element to be expanded, it is the same class Collapsed by default. Another class can be used to allow multiple "expansion states" for the same container element, like the source code view. In this case, the class used for the "collapsed" state is defined in the attribute data-expander-class of the expander.

Also when data-expander-class is used, the expander itself still toggles with class Collapsed. The two classes for both elements must be set accordingly in HTML to start synchronized.

Example: Show + Hide MC/DC Blocks (reduced to relevant classes and attributes)

<div id="SourceView">
...            
<div class="Expander CheckboxToggler" data-expander-for="SourceView" data-expander-class="MCDCCollapsed">
    MC/DC Blocks
</div>
For the expander, three designs / HTML patterns can be reused from Elements.css:
  • Rotator: Add class Rotator on the expander and use a suitable HTML content for rotating. A turn of 90° back and forth is performed with every toggle.
  • Text toggler: Add class TextToggler on the expander and provide two alternative texts in child elements like in: 
    <span ID="TopLevelDetailsToggler" class="Expander TextToggler Collapsed" data-expander-for="TopLevelDetails">
  <span class="TextToExpand">show more</span>
  <span class="TextToCollapse">show less</span>
</span>
  • Checkbox toggler: Add class CheckboxToggler on the expander. A checkbox is rendered on the left hand side of the expander text.

The elements to be expanded, respectively their descendants, are all indiviually designed without a reusable design. In most simply cases, some descendants are hidden with display: none;.