Before I go into how to create collapsible content on IDZ, I want to get an overview of why you should avoid hiding content as much as possible in your documentation.
- Forcing people to click on headings one at a time to display full content can be cumbersome, especially if there are many topics on the list that individuals care about. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once. It is easier to scroll down the page than to decide which heading to click on. (Every single decision, no matter how minor or how easy, adds cognitive load.) The experience feels less fragmented with fewer attention switches.
- Accordions increase interaction cost. Readers treat clicks like currency: they don’t mind spending it if the click is worthwhile and has value. However, resentment ensues when a click is considered a wasted effort; it doesn’t take many wasted clicks to escalate people’s reaction to full-blown defiance. Acquiring click targets, such as links and buttons, and waiting for content to appear requires work and wastes precious time that users don’t want to give.
- Hiding important content behind triggers diminishes people’s awareness of it. An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to “spend” clicks on them. When content is hidden, people might ignore information.
- Printing is another consideration that a reader correctly points out. Accordions are not well suited for printing documents and require people to print snippets of content at a time.
If you're worried about your page getting too long, you may want to familiarize yourself with some of the myths of scrolling long pieces of content.
BKMs
- It's ok to hide content when...
- developers need only a few key pieces of content to be successful and the rest just provides context and may get confusing or in the way.
- you have supplemental information that can be skipped
- a small portion of your audience will find that content relevant
- Don't put any legal content in a hidden element (it has to be visible to the user without effort)
- Don't put steps of a tutorial or code sample in a hidden element. Developers prefer to scroll through procedural tasks.
- Make sure you visible copy is very descriptive of what the developer will see if they click. Too vague and they won't ever interact.
- Don't utilize these features unless you have a very good grasp of html as you will have to be editing the content in html. The WYSIWYG is not stable enough for editing this content in "preview" mode.
- Creating entire pages with imagery and tables within these hidden areas will be flagged as feature abuse. Keep to a couple paragraphs, or bullets, or a simple single image with text.
- Don't get fancy with layouts (trying to mimic 2 or 3 column content is a no-no)
Examples of Collapsable Content
Standard FAQ
- Is this a good question to ask?
- This is your answer area. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Is this question number two?
- Content can be styled. Avoid using imagery and basically creating a full page of hidden content.
- Demonstrate Code Branch coverage over reference decoder
- Determine Syntax coverage which reports all value from the range of syntax element.
- Access a combined view of Syntax and Code Branch reports
You will have to disable rich-text (link below wysiwyg) in order to enter this code in. You can put multiple paragraphs, bullets and such in the answer area.
Note: this style doesn't align with content. We are tracking down the bug (low priority).
<dl class="faq"><dt>Question (visible)</dt><dd>Answer area (hidden)</dd><dt>Question 2</dt><dd>Answer 2 (hidden)</dd></dl>
Standard FAQ with Persistent Link Functionality
- Visible question one?
- Hidden answer area.
- Another visible question?
Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Run the installation wizard, and then launch the application from the Windows* Start Menu. Start by creating a blinking LED light using the tutorial on the welcome page. Try other sample applications and create your own programs.
You'll notice the link icon at the end of the FAQ. Clicking on it will trigger a copy function (give it a try above). When you provide developers with that link, it will take you to that element with the item opened. The difference between standard and adding persistent links in the code is the data-target. Ensure you use dashes and have a unique name for each target.
Note: this style doesn't align with content. We are tracking down the bug (low priority).
<dl class="faq"><dt data-target="visible-question-one">Visible question one?</dt><dd>Hidden answer area.</dd></dl>
Checklist
- A random item for your checklist
- Here is the answer to your item nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
- Your checklist is getting bigger now
- Here is the answer to your item nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
The only thing that changes between a standard FAQ and the Checklist is the class applied to the <dl>. Note, it is better to edit this in the disable view to ensure you don't break the checklist styling.
<dl class="checklist"><dt data-target="random-item-one">A random item for your checklist</dt><dd>Here is the answer to your item nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.</dd><dl>
Expandable List
Very similar to the checklist, but without the check. The class will change to "expandeablelist" to create this look.
<dl class="expandablelist"><dt>My amazing list of items is incredibly useful</dt><dd>Answer to benefits area.</dd></dl>
Traditional Show/Hide Toggle
Do you work for Intel? Get your free iPhone X* ›
I was just kidding. No really, I don't have a free iPhone to give to my fellow Intel colleagues. I'm sorry for getting your hopes up. You can put any standard WYSIWYG html formatting in the "more content" div area.
Click on the free iPhone offer to see the toggle in action. Our toggle system works on the traditional div visible/hidden system. Remember that that visible copy is going to need to be very clear and enticing to inspire a "click". There are also limitations to the toggle. While the code does allow you to change the text when opened (via the data-toggled-text field), this only works for some browsers. Don't rely on it for everyone.
<p><a class="more-toggle" data-toggled-text="Hide me!" href="#">Here is your CTA ›</a></p><div class="more-content"><p>Your more content area.</p></div>