Language selection

Search

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).

Show and hide content in different viewports with CSS styles
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible
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.

✔ Visible on x-small
visible-xs
✔ Visible on small
visible-sm
Medium
hidden-md ✔ Visible on medium
visible-md
✔ Visible on large
visible-lg
✔ Visible on x-small and small
visible-xs visible-sm
✔ Visible on medium and large
visible-md visible-lg
✔ Visible on x-small and medium
visible-xs visible-md
✔ Visible on small and large
visible-sm visible-lg
✔ Visible on x-small and large
visible-xs visible-lg
✔ Visible on small and medium
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.

✔ Hidden on x-small
visible-xs
✔ Hidden on small
visible-sm
Medium
hidden-md ✔ Hidden on medium
visible-md
✔ Hidden on large
visible-lg
✔ Hidden on x-small and small
visible-xs visible-sm
✔ Hidden on medium and large
visible-md visible-lg
✔ Hidden on x-small and medium
visible-xs visible-md
✔ Hidden on small and large
visible-sm visible-lg
✔ Hidden on x-small and large
visible-xs visible-lg
✔ Hidden on small and medium
visible-sm visible-md

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.

Appearance

1: Page 1 of search results

(Actual link text: 1: Page 1 of search results)

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)
Show and hide content for print with CSS styles
Class Browser Print
.visible-print Visible
.hidden-print Visible

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: