Toggle menu
  1. Community Area
  2. Release Notes
  3. Video Guides
  4. Example Content
  5. MyGOSS

Disclosure

Disclosures are designed to offer a flexible way to create sections of a page that users can expand and collapse.

disclosure

The Disclosures are designed to smoothly expand and collapse sections of content, using accessible and user-friendly interactions. While they typically reveal text, they can be used to display any type of content or components.

When to use this component

Use the Disclosure when you need to have content sections that users can expand or collapse. This is especially useful for organising information in a compact space, allowing users to reveal only what they need to see. Aim for at least two sections in a disclosure to make it effective, as a single section might not fully utilise the component's capabilities.

If your content needs to be visible all at once, or if it doesn't need to be toggled, consider using alternative components like a static list or grid layout instead.

The Disclosure is a great choice when you want to save space or give users control over which sections of content they interact with, while keeping the page clean and organised.

Examples in GOSS products

  • The Disclosure inline
  • My Account user profile section
  • Chill theme mobile navigation sections

 

Accessibility considerations

This component isn't designed to work fully without JavaScript. If JavaScript is unavailable, the hidden content will remain visible.

General notes

If you find that your disclosures are being rendered consecutively to show and hide related parts of the page (for example a list of facets and sub facets in a search) the Accordion component may be more appropriate as this provides better semantic structure and more complex options to accommodate different types of accordion behaviour.

Basic disclosure

By default, the disclosure starts collapsed, so users need to click the header button to expand and view the content.

Both the "heading" and "content" areas should contain content or markup for the disclosure to work effectively.

Basic collapsed disclosure example
This is the disclosure content. It will start collapsed when JavaScript is working, otherwise the content will start displayed.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--nojs" id="c_27240508854722">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_27240508854722_content" id="c_27240508854722_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
		Basic collapsed disclosure example
	</button>
	<div class="gi-disclosure__fallback">
		Basic collapsed disclosure example
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27240508854722_toggle" id="c_27240508854722_content">
		This is the disclosure content. It will start collapsed when JavaScript is working, otherwise the content will start displayed.
	</div>
</div>
<script>gi.disclosure.initialise("c_27240508854722");</script>
<comp:disclosure>
	<ui:define name="heading">Basic collapsed disclosure example</ui:define>
	<ui:define name="content">
		This is the disclosure content. It will start collapsed when JavaScript is working, otherwise the content will start displayed.
	</ui:define>
</comp:disclosure>
@helper TheHeading() {
	<text>Basic collapsed disclosure example</text>
}

@helper TheContent() {
	<text>This is the disclosure content. It will start collapsed when JavaScript is working, otherwise the content will start displayed.</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = TheHeading,
		Content = TheContent,
		Collapsed = true
	});
}

Collapsed attribute

A disclosure with the collapsed attribute set to "false" will render the component as expanded, with the following aria attribute:

aria-expanded="true"

By setting the collapsed to false on the disclosure, it indicates that the section is expanded and visible to the user. The aria attribute helps assistive technologies understand that the content is currently open, making the disclosure more accessible.

Basic expanded disclosure example
This is the disclosure with collapsed set as 'false' - the content will start displayed.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--nojs" id="c_27339918447815">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="true" aria-controls="c_27339918447815_content" id="c_27339918447815_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
		Basic expanded disclosure example
	</button>
	<div class="gi-disclosure__fallback">
		Basic expanded disclosure example
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27339918447815_toggle" id="c_27339918447815_content">
		This is the disclosure with collapsed set as 'false' - the content will start displayed.
	</div>
</div>
<script>gi.disclosure.initialise("c_27339918447815");</script>
<comp:disclosure collapsed="false">
	<ui:define name="heading">Basic expanded disclosure example</ui:define>
	<ui:define name="content">
		This is the disclosure with collapsed set as 'false' - the content will start displayed.
	</ui:define>
</comp:disclosure>
@helper TheHeading() {
	<text>Basic expanded disclosure example</text>
}

@helper TheContent() {
	<text>This is the disclosure with collapsed set as 'false' - the content will start displayed.</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = TheHeading,
		Content = TheContent,
		Collapsed = false
	});
}

Nested disclosures

A demonstration of a more complex setup, featuring a series of simple disclosures nested inside a larger, controllable disclosure.

Disclosures may be nested in complex UI situations, and this aims to demonstrate that they can be independently configured.

Basic collapsed disclosure example
Basic collapsed example inside a disclosure
Inner disclosure, starts off collapsed.
Basic expanded example inside a disclosure
Inner disclosure, starts off expanded.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--nojs" id="c_27414247694568">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_27414247694568_content" id="c_27414247694568_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
		Basic collapsed disclosure example
	</button>
	<div class="gi-disclosure__fallback">
		Basic collapsed disclosure example
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27414247694568_toggle" id="c_27414247694568_content">
		<div class="gi-disclosure gi-disclosure--nojs" id="c_27414247847204">
			<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_27414247847204_content" id="c_27414247847204_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
				Basic collapsed example inside a disclosure
			</button>
			<div class="gi-disclosure__fallback">
				Basic collapsed example inside a disclosure
			</div>
			<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27414247847204_toggle" id="c_27414247847204_content">
				Inner disclosure, starts off collapsed.
			</div>
		</div>
		<script>gi.disclosure.initialise("c_27414247847204");</script>
		<div class="gi-disclosure gi-disclosure--nojs" id="c_27414247936075">
			<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="true" aria-controls="c_27414247936075_content" id="c_27414247936075_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
				Basic expanded example inside a disclosure
			</button>
			<div class="gi-disclosure__fallback">
				Basic expanded example inside a disclosure
			</div>
			<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27414247936075_toggle" id="c_27414247936075_content">
				Inner disclosure, starts off expanded.
			</div>
		</div>
		<script>gi.disclosure.initialise("c_27414247936075");</script>
	</div>
</div>
<script>gi.disclosure.initialise("c_27414247694568");</script>
<comp:disclosure collapsed="false">
	<ui:define name="heading">Basic collapsed disclosure example</ui:define>
	<ui:define name="content">
		<comp:disclosure>
			<ui:define name="heading">Basic collapsed example inside a disclosure</ui:define>
			<ui:define name="content">
				Inner disclosure, starts off collapsed.
			</ui:define>
		</comp:disclosure>
		<comp:disclosure collapsed="false">
			<ui:define name="heading">Basic expanded example inside a disclosure</ui:define>
			<ui:define name="content">
				Inner disclosure, starts off expanded.
			</ui:define>
		</comp:disclosure>
	</ui:define>
</comp:disclosure>
@helper InnerHeading1() {
	<text>Basic collapsed example inside a disclosure</text>
}

@helper InnerContent1() {
	<text>Inner disclosure, starts off collapsed. </text>
}

@helper InnerHeading2() {
	<text>Basic expanded example inside a disclosure</text>
}

@helper InnerContent2() {
	<text>Inner disclosure, starts off expanded. </text>
}

@helper OuterHeading() {
	<text>Basic collapsed disclosure example</text>
}

@helper OuterContent() {
	Html.Disclosure(new DisclosureSettings
	{
		Heading = InnerHeading1,
		Content = InnerContent1,
		Collapsed = true
	});
	Html.Disclosure(new DisclosureSettings
	{
		Heading = InnerHeading2,
		Content = InnerContent2,
		Collapsed = false
	});
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = OuterHeading,
		Content = OuterContent,
		Collapsed = false
	});
}

Display show hide

A disclosure with the display show hide attribute set to "true".

data-display-show-hide="true"

data-show-text="Show" data-hide-text="Hide"

By setting the display show hide attribute to "true" on the disclosure, it will display "Show" and "Hide" labels on the toggle button, allowing users to see the current state.

The show hide text attributes allow custom text labels to appear on the toggle button based on the state of the component. When the content is collapsed, the button will display the text from data-show-text (eg "Show"), and when the content is expanded, it will display the text from data-hide-text (eg "Hide").

This dynamic labelling provides clear feedback for users, helping them understand whether clicking the button will reveal or hide content.

Basic collapsed disclosure with displayShowHide set as true
This is the content, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--nojs" id="c_27084033752880">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_27084033752880_content" id="c_27084033752880_toggle" data-show-text="Show" data-hide-text="Hide" data-display-show-hide="true" hidden="">
		Basic collapsed disclosure with displayShowHide set as true
	</button>
	<div class="gi-disclosure__fallback">
		Basic collapsed disclosure with displayShowHide set as true
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--nojs" role="region" aria-labelledby="c_27084033752880_toggle" id="c_27084033752880_content">
		This is the content, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
	</div>
</div>
<script>gi.disclosure.initialise("c_27084033752880");</script>
<comp:disclosure displayShowHide="true">
	<ui:define name="heading">Basic collapsed disclosure with displayShowHide set as true</ui:define>
	<ui:define name="content">
		This is the content, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
	</ui:define>
</comp:disclosure>
@helper TheHeading() {
	<text>Basic collapsed disclosure with displayShowHide set to true</text>
}

@helper TheContent() {
	<text>This is the content, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = TheHeading,
		Content = TheContent,
		Collapsed = true,
		DisplayShowHide = true
	});
}

Body disclosure

A disclosure with the body CSS modifier applied.

<div class="gi-disclosure gi-disclosure--body">...</div>

By setting the body CSS modifer on the disclosure, this will give it a cleaner, more polished look that blends nicely with the rest of your design.

Basic collapsed disclosure example
This is the collapsed disclosure, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--body gi-disclosure--nojs" id="c_115066701070000">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--body gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115066701070000_content" id="c_115066701070000_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
		Basic collapsed disclosure example
	</button>
	<div class="gi-disclosure__fallback gi-disclosure__fallback--body">
		Basic collapsed disclosure example
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--body gi-disclosure__content--nojs" role="region" aria-labelledby="c_115066701070000_toggle" id="c_115066701070000_content">
		This is the collapsed disclosure, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
	</div>
</div>
<script>gi.disclosure.initialise("c_115066701070000");</script>
<comp:disclosure modifiers="body">
	<ui:define name="heading">Basic collapsed disclosure example</ui:define>
	<ui:define name="content">
		This is the collapsed disclosure, it will start collapsed when JS is working correctly, otherwise the content will start off as displayed.
	</ui:define>
</comp:disclosure>
@helper TheHeading() {
	<text>Basic collapsed disclosure example</text>
}

@helper TheContent() {
	<text>This is the collapsed disclosure, it starts collapsed when JS is working correctly, otherwise the content will start off as displayed.</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = TheHeading,
		Content = TheContent,
		Collapsed = true,
		Modifiers = new string[] {"body"}
	});
}

Tooltip

A disclosure with a CSS modifier gi-disclosure--tooltip applied

<div class="gi-disclosure gi-disclosure--tooltip">...</div>

By setting the tooltip CSS modifier on the disclosure, the disclosure content is displayed in a tooltip rather than an expanding disclosure. They offer brief, contextual guidance when users hover over or focus on an element, helping to clarify its purpose or explain functionality without taking up space on the main screen.

This keeps the design clean while still giving users the support they need, right when they need it. Tooltips are especially valuable for complex interfaces or icons that might not be immediately clear.

Tooltip modifier disclosure
This is the disclosure content. It will display on hover/focus.
HTML Java .NET 
<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--nojs" id="c_115264637912900">
	<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--tooltip gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115264637912900_content" id="c_115264637912900_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
		Tooltip modifier disclosure
	</button>
	<div class="gi-disclosure__fallback gi-disclosure__fallback--tooltip">
		Tooltip modifier disclosure
	</div>
	<div class="gi-disclosure__content gi-disclosure__content--tooltip gi-disclosure__content--nojs" role="region" aria-labelledby="c_115264637912900_toggle" id="c_115264637912900_content">
		This is the disclosure content. It will display on hover/focus.
	</div>
</div>
<script>gi.disclosure.initialise("c_115264637912900");</script>
<comp:disclosure modifiers="tooltip">
	<ui:define name="heading">Tooltip modifier disclosure</ui:define>
	<ui:define name="content">
		This is the disclosure content. It will display on hover/focus.
	</ui:define>
</comp:disclosure>
@helper TheHeading() {
	<text>Tooltip modifier disclosuree</text>
}

@helper TheContent() {
<text>This is the disclosure content. It will display on hover/focus.</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = TheHeading,
		Content = TheContent,
		Modifiers = new string[] {"tooltip"}
	});
}

Tooltip options

Disclosures with additional modifiers to style them for specific purposes.

SLA (Date Within)

<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-within">...</div>

SLA (Date Reaching)

<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-reaching">...</div>

SLA (Date Breached)

<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-breached">...</div>

Tooltip and sla-within modifiers
This is the disclosure content.
Tooltip and sla-within modifiers
This is the disclosure content.
Tooltip and sla-within modifiers
This is the disclosure content.
Tooltip modifiers with user details markup
Full name John Smith Email [email protected] Username johnsmith Last logged in 09 Dec 2022 15:00
HTML Java .NET 
<div>
	<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-within gi-disclosure--nojs" id="c_115684143011000">
		<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--tooltip gi-disclosure__toggle--sla-within gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115684143011000_content" id="c_115684143011000_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
			Tooltip and sla-within modifiers
		</button>
		<div class="gi-disclosure__fallback gi-disclosure__fallback--tooltip gi-disclosure__fallback--sla-within">
			Tooltip and sla-within modifiers
		</div>
		<div class="gi-disclosure__content gi-disclosure__content--tooltip gi-disclosure__content--sla-within gi-disclosure__content--nojs" role="region" aria-labelledby="c_115684143011000_toggle" id="c_115684143011000_content">
			This is the disclosure content.
		</div>
	</div>
	<script>gi.disclosure.initialise("c_115684143011000");</script>
</div>
<div>
	<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-reaching gi-disclosure--nojs" id="c_115684143302000">
		<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--tooltip gi-disclosure__toggle--sla-reaching gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115684143302000_content" id="c_115684143302000_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
			Tooltip and sla-within modifiers
		</button>
		<div class="gi-disclosure__fallback gi-disclosure__fallback--tooltip gi-disclosure__fallback--sla-reaching">
			Tooltip and sla-within modifiers
		</div>
		<div class="gi-disclosure__content gi-disclosure__content--tooltip gi-disclosure__content--sla-reaching gi-disclosure__content--nojs" role="region" aria-labelledby="c_115684143302000_toggle" id="c_115684143302000_content">
			This is the disclosure content.
		</div>
	</div>
	<script>gi.disclosure.initialise("c_115684143302000");</script>
</div>
<div>
	<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--sla-breached gi-disclosure--nojs" id="c_115684146954300">
		<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--tooltip gi-disclosure__toggle--sla-breached gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115684146954300_content" id="c_115684146954300_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
			Tooltip and sla-within modifiers
		</button>
		<div class="gi-disclosure__fallback gi-disclosure__fallback--tooltip gi-disclosure__fallback--sla-breached">
			Tooltip and sla-within modifiers
		</div>
		<div class="gi-disclosure__content gi-disclosure__content--tooltip gi-disclosure__content--sla-breached gi-disclosure__content--nojs" role="region" aria-labelledby="c_115684146954300_toggle" id="c_115684146954300_content">
			This is the disclosure content.
		</div>
	</div>
	<script>gi.disclosure.initialise("c_115684146954300");</script>
</div>
<div>
	<div class="gi-disclosure gi-disclosure--tooltip gi-disclosure--nojs" id="c_115684147061000">
		<button type="button" class="gi-disclosure__toggle gi-disclosure__toggle--tooltip gi-disclosure__toggle--nojs" aria-expanded="false" aria-controls="c_115684147061000_content" id="c_115684147061000_toggle" data-show-text="Show" data-hide-text="Hide" hidden="">
			Tooltip modifiers with user details markup
		</button>
		<div class="gi-disclosure__fallback gi-disclosure__fallback--tooltip">
			Tooltip modifiers with user details markup
		</div>
		<div class="gi-disclosure__content gi-disclosure__content--tooltip gi-disclosure__content--nojs" role="region" aria-labelledby="c_115684147061000_toggle" id="c_115684147061000_content">
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Full name </span>
				<span class="nvp__value"> John Smith </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Email </span>
				<span class="nvp__value"> [email protected] </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Username </span>
				<span class="nvp__value"> johnsmith </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Last logged in </span>
				<span class="nvp__value"> 09 Dec 2022 15:00 </span>
			</span>
		</div>
	</div>
	<script>gi.disclosure.initialise("c_115684147061000");</script>
</div>
<div>
	<comp:disclosure modifiers="tooltip,sla-within">
		<ui:define name="heading">Tooltip and sla-within modifiers</ui:define>
		<ui:define name="content">
			This is the disclosure content.
		</ui:define>
	</comp:disclosure>
</div>

<div>
	<comp:disclosure modifiers="tooltip,sla-reaching">
		<ui:define name="heading">Tooltip and sla-within modifiers</ui:define>
		<ui:define name="content">
			This is the disclosure content.
		</ui:define>
	</comp:disclosure>
</div>

<div>
	<comp:disclosure modifiers="tooltip,sla-breached">
		<ui:define name="heading">Tooltip and sla-within modifiers</ui:define>
		<ui:define name="content">
			This is the disclosure content.
		</ui:define>
	</comp:disclosure>
</div>

<div>
	<comp:disclosure modifiers="tooltip">
		<ui:define name="heading">Tooltip modifiers with user details markup</ui:define>
		<ui:define name="content">
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Full name </span>
				<span class="nvp__value"> John Smith </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Email </span>
				<span class="nvp__value"> [email protected] </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Username </span>
				<span class="nvp__value"> johnsmith </span>
			</span>
			<span class="nvp nvp--userdetails">
				<span class="nvp__label"> Last logged in </span>
				<span class="nvp__value"> 09 Dec 2022 15:00 </span>
			</span>
		</ui:define>
	</comp:disclosure>
</div>
@helper TheHeading(string modifier) {	
	<text>Tooltip modifier @modifier modifiers</text>
}

@helper TheContent() {
<text>This is the disclosure content</text>
}

@{
	Html.Disclosure(new DisclosureSettings
	{
		Heading = () => TheHeading("sla-within"),
		Content = () => TheContent(),
		Modifiers = new string[] { "tooltip", "sla-within" }
	});
	
	Html.Disclosure(new DisclosureSettings
	{
		Heading = () => TheHeading("sla - reaching"),
		Content = () => TheContent(),
		Modifiers = new string[] { "tooltip", "sla-reaching" }
	});

	Html.Disclosure(new DisclosureSettings
	{
		Heading = () => TheHeading("sla-breached"),
		Content = () => TheContent(),
		Modifiers = new string[] { "tooltip", "sla-breached" }
	});
}