Expandable

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.