In this module you will find examples of and code for a variety of show/hides. Showing and hiding content is a technique used on web pages to control when and how users access information. For course design, this strategy is often deployed when we want to:
organize content to reduce cognitive load (e.g., accordions and tabbed-interfaces);
reveal content as part of a formative assessment (e.g., practice questions and answers);
provide clarity by introducing an alternate modality (e.g., transcripts of videos).
This module will provide a variety of examples of show/hide techniques. It is important to note that a show/hide should be used judiciously and should avoid using multimedia, large volumes of content, or foot notes.
Best Practices
Use good heading structure with proper heading tag (
<h2>, <h3>) to introduce the content and within hidden sections to create proper page structure, such as<h2>for the heading and<h3>subheadings in the content area. Note that you cannot use headings with a summary tag.Indicate to the user that show/hide content exists on the page and how to access it to make the expandable content obvious.
Avoid using show/hide code to artificially reduce the length of pages. If you have lots of text, multimedia objects, and other elements, you may want to split the content across multiple pages rather than condensing it with show/hides.
0 Comments
Add your comment