The expandable widget uses the custom element <devsite-expandable>
to let
users hide or show portions of content in an expandable section. In a Markdown
file, wrap the custom element with a standard HTML element, such as a
<section>
or <div>
.
Section toggle
The following example is wrapped in a <devsite-expandable>
custom element that
defaults to a hidden position. Its heading has a class
attribute named
showalways
.
This heading always shows
This paragraph defaults to a hidden position.
This code block within the custom element also defaults to a hidden position.
Custom control
The following example adds the expand-control
class to the button
element of
the <devsite-expandable>
custom element to expand and collapse the section
without a toggle.
Many options are available
Expand once
The following example adds the expand-control once
class to a link within the
<devsite-expandable>
custom element that shows additional content when clicked
and then disappears from the page.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
More...Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Auto-expand on linking
The following example adds a #sample1 ID to the
<devsite-expandable>
custom element that auto-expands the section on page load
when you link to it.
How to auto-expand on linking
Close this expandable section, click the #sample1 link above, then reload the page to auto-expand this expandable section.
Code block within the 'Auto-expand on linking' demo.
Open by default
The following example adds the expanded
attribute to the
<devsite-expandable>
custom element to make the expandable open by default.
Expanded by default
Open by default is great when you have lots of expandables, such as for release notes, but you want to keep the most recent one open.