Detached Disclosures provide a flexible way to create expandable sections with toggles and content placed separately on the page.
The Detached Disclosure works similarly to the Disclosure component but lets you place the toggle and hidden content in different parts of the page, giving you more flexibility in how they're arranged.
When to use Detached Disclosure
The Detached Disclosure is ideal when you need to separate the disclosure toggle from its content, such as when there's a block of summary content in between or when wrapping elements are required around one or both parts. It consists of two components, the disclosure heading and disclosure content, which should always be used together.
If there's no need to separate the toggle and content, the regular Disclosure component will be a better fit.
It also shares some functionality with the Mobile Navigation and Mobile Navigation Toggle components, so you might want to consider using them if they better suit your needs.
Examples in GOSS products
- The Cruise theme homepage where the markup for the Top Tasks section dictated that the toggle had to be output separately from the disclosure content
Accessibility considerations
The detached disclosure components have the same accessibility considerations as the Disclosure component.
General notes
While listed as a single component, it actually exists as a pair that must always be used together.
Basic detached disclosure
A disclosure that has been detached and has elements between the button and content.
<div class="gi-disclosure gi-disclosure--button">
<button type="button" class="gi-disclosure__toggle">...</button>
</div>
<p>...</p>
<div class="gi-disclosure gi-disclosure--content">
<div class="gi-disclosure__content">...</div>
</div>
This is content between the disclosure heading and content components
<div class="gi-disclosure gi-disclosure--button gi-disclosure--nojs">
<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="test1disclosure_content" id="test1disclosure_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
Test disclosure 1 heading
</button>
<div class="gi-disclosure__fallback">
Test disclosure 1 heading
</div>
</div>
<script>gi.disclosure.initialiseDetached("test1disclosure");</script>
<p>This is content between the disclosure heading and content components</p>
<div class="gi-disclosure gi-disclosure--content">
<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="test1disclosure_toggle" id="test1disclosure_content">
Test disclosure 1 content
</div>
</div>
<script>gi.disclosure.initialiseDetachedContent("test1disclosure");</script><comp:disclosureHeading contentId="test1disclosure">
Test disclosure 1 heading
</comp:disclosureHeading>
<p>This is content between the disclosure heading and content components</p>
<comp:disclosureContent id="test1disclosure">
Test disclosure 1 content
</comp:disclosureContent>@helper TheHeading() {
<text>Test Disclosure 1 Heading</text>
}
@helper TheContent() {
<text>Test disclosure 1 content </text>
}
@{
var id = "detached_disclosure_1";
Html.DisclosureHeading(new DisclosureHeadingSettings
{
Id = id,
Contents = TheHeading
});
}
<p>This is content between the disclosure heading and content components</p>
@{
Html.DisclosureContent(new DisclosureContentSettings
{
Id = id,
Contents = TheContent
});
}
Share this page
