Invisible and visible content
Work in progress
This page is a work in progress.
Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).
Purpose
Use to show or hide content − it all depends on what you need to accomplish. There are styles specific to assistive technology (aid screen-reader users), responsive design (view from small to large devices), general usage (use of toggle tabs), and print (print only necessary info).
Design and coding
Basic use
Responsive show and hide
Use to complement the presentation of content on each device. For faster mobile-friendly development, use these utility classes to show and hide content by device via media query. There are also utility classes to toggle content when it is printed.
Try to use these on a limited basis, and avoid creating entirely different versions of the same site.
Limitations
Responsive utilities are currently only available for block and table toggling. Their use with inline and table elements is currently not supported.
Available classes
Use a single or combination of the available CSS classes to toggle content across viewport (screen display area) breakpoints (point user needs to scroll).
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
.visible-xs |
Visible | Hidden | Hidden | Hidden |
.visible-sm |
Hidden | Visible | Hidden | Hidden |
.visible-md |
Hidden | Hidden | Visible | Hidden |
.visible-lg |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Appearance
Resize your browser, or load on different devices to test the responsive utility classes.
Visible on...
Green check-marks and the text "Visible on" indicate the element is visible in your current viewport.
hidden-xs
✔ Visible on x-smallvisible-xs
hidden-sm
✔ Visible on smallvisible-sm
hidden-md
✔ Visible on mediumvisible-md
hidden-lg
✔ Visible on largevisible-lg
visible-xs visible-sm
visible-md visible-lg
visible-xs visible-md
visible-sm visible-lg
visible-xs visible-lg
visible-sm visible-md
Appearance
Resize your browser, or load on different devices to test the responsive utility classes.
Hidden on...
Green check-marks and the text "Hidden on" indicate the element is hidden in your current viewport.
Screen reader invisible content
Use to clip content into a one pixel square. This creates links that are descriptive (and compliant), but don't visually clutter the page. It is common to use this technique to target assistive technology users. For example, screen-reader users hear the information, but the visual user does not hear or see it. The CSS attribute display: none;
does not achieve the same effect, as screen readers ignore it entirely.
Correct use
Compliance point(s):
- Use
.wb-inv
to hide content from visual users, and to create descriptive links for assistive technology users - Ensure the invisible text is concise, descriptive and unique
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<a class="button button-small" href="#">1<span class="wb-inv">: Page 1 of search results</span></a>
General show and hide
Use to force an element to show or hide with the use of .show
or .hidden
classes. These classes use !important
.
Use .invisible
to toggle only the visibility of an element; the display
is not modified, and the element still affects the flow of the document.
Correct use
Compliance point(s):
- Use with custom JavaScript to affect the visibility of content on a page. These two classes are available for scripting solutions
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
Print show and hide
Use these classes to toggle content for print.
Correct use
Compliance point(s):
- Use the classes
.visible-print
or.hidden-print
to either include or exclude content when a user prints a page - Prevent unnecessary content from printing, such as menus and decorative graphics
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Class | Browser | |
---|---|---|
.visible-print |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Some of the code and documentation for this page is sourced from Bootstrap (external link)
- Date modified: