Collapsible content
Let’s start with a simple accordion.
HTML <details> and <summary>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
Use a Mac computer.
With shade boxes
Individual shade box
Applied to group of collapsible sections
Examples:
- In a long list of Frequently Asked Questions, you might want to display only the questions to make it easier for users to scan the page. Then they can click the title of any question they’re interested in.
- If a long procedure includes multiple sub-procedures, the set of steps can be unwieldy. You can hide these sub-procedures with something like a Details or Steps title that users can see. For example, if Step 3 is “Provide Maintainer access to the user,” you could add a Details section that would give specific steps for assigning permissions.
- With inline images. Click a little inline image to display a different image. This might be a bad idea. I’m spitballing here.
In the past, page search (Ctrl/Cmd+F) failed to find hidden content, so collapsing an entire FAQ page for example might make it difficult for users to find what they’re looking for.
While this page search problem still applies to Safari, Chrome users can find content within a page.
Page search is something to consider.
- Make sure that you add open and close syntax for each collapsible section. If you forget to close a section, validation won’t catch it.
- While it’s possible to include headings inside a collapsible section, it’s not recommended.
- Make sure that images and notes inside a collapsible section include blank lines before and after. Validation DOES catch these errors.
FAQ Use Case
Examples:
- In a long list of Frequently Asked Questions, you might want to display only the questions to make it easier for users to scan the page. Then they can click the title of any question they’re interested in.
- If a long procedure includes multiple sub-procedures, the set of steps can be unwieldy. You can hide these sub-procedures with something like a Details or Steps title that users can see. For example, if Step 3 is “Provide Maintainer access to the user,” you could add a Details section that would give specific steps for assigning permissions.
- With inline images. Click a little inline image to display a different image. This might be a bad idea. I’m spitballing here.
In the past, page search (Ctrl/Cmd+F) failed to find hidden content, so collapsing an entire FAQ page for example might make it difficult for users to find what they’re looking for.
While this page search problem still applies to Safari, Chrome users can find content within a page.
Page search is something to consider.
- Make sure that you add open and close syntax for each collapsible section. If you forget to close a section, validation won’t catch it.
- While it’s possible to include headings inside a collapsible section, it’s not recommended.
- Make sure that images and notes inside a collapsible section include blank lines before and after. Validation DOES catch these errors.
Collapser with markdown
Bullet list and image
This is a bullet list.
- Bullet one
- Bullet two
- two point five
- Bullet three
This is a bullet list.
- Bullet one
- Bullet two
- two point five
- Bullet three
Note
This is text.
| note note |
|---|
| NOTE |
| This is a simple note. |
And, scene.
Numbered list
-
Do this.
-
Do that.
accordion Details Doing that requires the following:
- Jello
- Carrots
- Pineapple
-
Do more.
Nested in collapser
Do the following:
-
Understand this.
-
Do this:
accordion Secret Life is short.
- Last step.
+++
Nested in note
| accordion |
|---|
| Click me! |
| I’m inside a note. |
Should not be rendered inside code block
copy con autoexec.bat
ren config.sys config.exe
+++Click here!
Let's hope I'm not collapsed.
+++
format c:
Code block inside collapser
Try this commands.
| code language-none |
|---|
|
And scene.
Heading inside collapser
This is a heading
This is paragraph text.