Conditional Content
DocBrowser defines several classes to hide/show content according to the current responsive display state. These classes can be used to provide more useful instructions on how to navigate in DocBrowser.
For example, the main DocBrowser topic page shows different instructions depending on whether these navigation tree has been collapsed or not:
<div class="primary-nav-shown">
For documentation refer to the topics in the navigation
panel to the left.
</div>
<div class="primary-nav-hidden">
For documentation refer to the topics in the popup navigation
menu accessible via the menu button at the top left.
</div>
Conditional Classes
Note that in all cases, "hidden" means display:none and "shown" means display:block.
| CSS Class Name | Description |
|---|---|
| hidden | General purpose always hidden class |
| hidden-in-docbrowser | This style is always hidden when using the DocBrowser style sheets. This can be used for content that should be shown when rendered outside of DocBrowser (eg: github pages), but hidden when shown in DocBrowser. |
| primary-nav-hidden | For content that should be shown when the navigation tree is hidden |
| primary-nav-shown | For content that should be shown when the navigation tree is shown |
| secondary-nav-hidden | For content that should be shown when the "On this page" links are hidden |
| secondary-nav-shown | For content that should be shown when the "On this page" liks are shown |
| primary-nav-enabled | For content that should be shown when the navigation tree is enabled |
| primary-nav-disabled | For content that should be shown when the navigation tree is disabled ie: <body class="nonav">. See here |
Demo
The following paragraphs demonstrate these styles - resize the browser and notice text change:
The primary nav is hidden
The primary nav is shown
The secondary nav is hidden
The secondary nav is shown
The primary nav is enabled
The primary nav is disabled