Accordion

Accordions are a group of related content sections that users can expand or collapse.

Accordion let users easily show or hide parts of a page, keeping the toggle button visible at all times. You can also add an optional summary to give users a quick preview of each section.

When to use the Accordion

Use the accordion when you have multiple related sections on a page that users can expand or collapse. This helps keep the content manageable and prevents it from feeling overwhelming when displayed all at once. Aim to include at least two sections in an accordion, as a single section doesn't make full use of its purpose. If only one of several possible sections needs to be shown, consider removing the accordion component and using an appropriate container instead.

For single sections or unrelated content requiring simple show-and-hide functionality, consider using the Disclosure or Detached Disclosure components instead.

The accordion can also serve as an alternative to Tabs when space is limited horizontally, as its vertical layout may be more suitable in those cases.

Examples in GOSS products

The Impact theme and Panel template panels using the Tabs type to provide a mobile-friendly alternative vertical layout to the horizontal tabs
Similarly, on the Cruise homepage to provide a mobile-friendly alternative layout for the middle tabs section
The Search template facet column

Accessibility considerations

This accordion component combines the best features of accessible examples provided by WAI-ARIA and GDS. It offers a range of configuration options to ensure accessible, flexible behavior for different needs.

Each accordion section is labeled by the text in its toggle, making navigation clear and intuitive.

When focused, the accordion control displays a dual outline highlight, allowing users to easily identify both the selected section toggle and the full area controlled by the accordion.

Additional notes

The accordion has several configuration options to customise how users interact with it. You can set it to allow each section to open and close independently, only allow one section open at a time, prevent the last open section from collapsing, or offer a choice between a simple toggle or a summary toggle. Additional options include letting users expand or collapse all sections at once and starting with all sections either open or closed.

Some configurations are mutually exclusive to avoid user confusion, such as starting with all sections open while also preventing them from being closed.

Accordions can also be nested, with each set working independently to support different layouts or behaviours within the same interface.

Basic accordion

An accordion with no additional configuration options, iterating over a typical article collection.

By default, the accordion displays the first item as open, with only one item open at a time.

Each accordion must include a collection of items to iterate over in the items attribute, and a var attribute to refer to each item in the iteration.

First item summary text

First item text content

Second item summary text

Third item summary text

HTML Java .NET

<div class="gi-accordion" id="c_9130173230315" data-allow-multiple="false" data-allow-toggle="false"
	data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_9130173230315_panel0"
			id="c_9130173230315_toggle0" type="button" hidden="" aria-disabled="true">First item
		</button>
		<div class="gi-accordion__panelsummary">First item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_9130173230315_toggle0"
		id="c_9130173230315_panel0">
		<div class="gi-accordion__panelcontent">First item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130173230315_panel1" id="c_9130173230315_toggle1"
			type="button" hidden="">Second item
		</button>
		<div class="gi-accordion__panelsummary">Second item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130173230315_toggle1"
		id="c_9130173230315_panel1" hidden="">
		<div class="gi-accordion__panelcontent">Second item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130173230315_panel2" id="c_9130173230315_toggle2"
			type="button" hidden="">Third item
		</button>
		<div class="gi-accordion__panelsummary">Third item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130173230315_toggle2"
		id="c_9130173230315_panel2" hidden="">
		<div class="gi-accordion__panelcontent">Third item text content
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_9130173230315");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Allow multiple attribute

An accordion with the allow multiple attribute set to true.

data-allow-multiple="true"

By setting the allow multiple attribute to true on the accordion, the user can expand and collapse as many of the accordion disclosures as they like.

First item summary text

First item text content

Second item summary text

Third item summary text

HTML Java .NET

<div class="gi-accordion" id="c_9130183492949" data-allow-multiple="true" data-allow-toggle="false"
	data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_9130183492949_panel0"
			id="c_9130183492949_toggle0" type="button" hidden="">First item
		</button>
		<div class="gi-accordion__panelsummary">First item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_9130183492949_toggle0"
		id="c_9130183492949_panel0">
		<div class="gi-accordion__panelcontent">First item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130183492949_panel1" id="c_9130183492949_toggle1"
			type="button" hidden="">Second item
		</button>
		<div class="gi-accordion__panelsummary">Second item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130183492949_toggle1"
		id="c_9130183492949_panel1" hidden="">
		<div class="gi-accordion__panelcontent">Second item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130183492949_panel2" id="c_9130183492949_toggle2"
			type="button" hidden="">Third item
		</button>
		<div class="gi-accordion__panelsummary">Third item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130183492949_toggle2"
		id="c_9130183492949_panel2" hidden="">
		<div class="gi-accordion__panelcontent">Third item text content
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_9130183492949");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),
		AllowMultiple = true

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Allow toggle attribute

An accordion with the allow toggle attribute set to true.

data-allow-toggle="true"

By setting the allow toggle attribute to true on the accordion, the user can collapse the currently open accordion disclosure, allowing the whole accordion to be fully collapsed. Setting only this attribute maintains that only one accordion disclosure may be expanded at once.

First item summary text

First item text content

Second item summary text

Third item summary text

HTML Java .NET

<div class="gi-accordion" id="c_9130187444726" data-allow-multiple="false" data-allow-toggle="true"
	data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_9130187444726_panel0"
			id="c_9130187444726_toggle0" type="button" hidden="">First item
		</button>
		<div class="gi-accordion__panelsummary">First item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_9130187444726_toggle0"
		id="c_9130187444726_panel0">
		<div class="gi-accordion__panelcontent">First item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130187444726_panel1" id="c_9130187444726_toggle1"
			type="button" hidden="">Second item
		</button>
		<div class="gi-accordion__panelsummary">Second item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130187444726_toggle1"
		id="c_9130187444726_panel1" hidden="">
		<div class="gi-accordion__panelcontent">Second item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130187444726_panel2" id="c_9130187444726_toggle2"
			type="button" hidden="">Third item
		</button>
		<div class="gi-accordion__panelsummary">Third item summary text
		</div>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130187444726_toggle2"
		id="c_9130187444726_panel2" hidden="">
		<div class="gi-accordion__panelcontent">Third item text content
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_9130187444726");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowToggle="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),
		AllowToggle = true

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Allow toggle all attribute

An accordion with the allow toggle all attribute set to true.

data-allow-toggleall="true"

By adding the allow toggle all attribute set to true to the accordion, additional buttons are emitted to give the user the option to expand or collapse all the accordion disclosures at once.

This option must be used in conjunction with the allowMultiple attribute set to true also, otherwise this functionality will be omitted.

First item summary text

First item text content

Second item summary text

Third item summary text

HTML Java .NET

<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true"
	data-start-collapsed="false" data-start-expanded="false" id="c_4903212287004">

	<div class="gi-accordion__controls">
		<button class="gi-accordion__toggleall" type="button">
			<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
			<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
		</button>
	</div>

	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287004_panel0" aria-expanded="true" class="gi-accordion__toggle" hidden=""
			id="c_4903212287004_toggle0" type="button">First item</button>
		<div class="gi-accordion__panelsummary">First item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287004_toggle0" class="gi-accordion__panel gi-accordion__panel--open"
		id="c_4903212287004_panel0" role="region">
		<div class="gi-accordion__panelcontent">First item text content</div>
	</div>

	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287004_panel1" class="gi-accordion__toggle" hidden=""
			id="c_4903212287004_toggle1" type="button">Second item</button>
		<div class="gi-accordion__panelsummary">Second item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287004_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden=""
		id="c_4903212287004_panel1" role="region">
		<div class="gi-accordion__panelcontent">Second item text content</div>
	</div>

	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287004_panel2" class="gi-accordion__toggle" hidden=""
			id="c_4903212287004_toggle2" type="button">Third item</button>
		<div class="gi-accordion__panelsummary">Third item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287004_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden=""
		id="c_4903212287004_panel2" role="region">
		<div class="gi-accordion__panelcontent">Third item text content</div>
	</div>
</div>
<script>gi.accordion.initialise("c_4903212287004");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true" allowToggleAll="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),
		AllowMultiple = true,
		AllowToggleAll = true

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Start collapsed attribute

An accordion with the start collapsed attribute set to true.

data-start-collapsed="true"

By setting the start collapsed attribute to true on the accordion, the initial state of the accordion will always have all disclosures collapsed. This is different to the default behaviour where usually the first item in the accordion is opened.

This setting will not work when allow toggle is disabled (default accordion behaviour), since in this configuration one disclosure must always be open.

First item text content

HTML Java .NET

<div class="gi-accordion" id="c_9130213119748" data-allow-multiple="false" data-allow-toggle="true" data-allow-toggleall="false" data-start-collapsed="true" data-start-expanded="false">
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130213119748_panel0"
			id="c_9130213119748_toggle0" type="button" hidden="">First item
		</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130213119748_toggle0"
		id="c_9130213119748_panel0">
		<div class="gi-accordion__panelcontent">First item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130213119748_panel1" id="c_9130213119748_toggle1"
			type="button" hidden="">Second item
		</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130213119748_toggle1"
		id="c_9130213119748_panel1" hidden="">
		<div class="gi-accordion__panelcontent">Second item text content
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_9130213119748_panel2" id="c_9130213119748_toggle2"
			type="button" hidden="">Third item
		</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_9130213119748_toggle2"
		id="c_9130213119748_panel2" hidden="">
		<div class="gi-accordion__panelcontent">Third item text content
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_9130213119748");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowToggle="true" startCollapsed="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),
		StartCollapsed = true

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Start expanded attribute

An accordion with the start expanded attribute set to true.

data-start-expanded="true"

By setting the start expanded attribute to true on the accordion, the initial state of the accordion will always have all disclosures expanded if it is possible for the user to do so manually.

This setting will not work when allow multiple is disabled (default accordion behaviour), since the user must be able to recreate this behaviour manually.

First item summary text

First item text content

Second item summary text

Third item summary text

HTML Java .NET

<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="false"
	data-start-collapsed="false" data-start-expanded="true" id="c_4903212287006">
	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287006_panel0" aria-expanded="true" class="gi-accordion__toggle" hidden=""
			id="c_4903212287006_toggle0" type="button">First item</button>
		<div class="gi-accordion__panelsummary">First item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287006_toggle0" class="gi-accordion__panel gi-accordion__panel--open"
		id="c_4903212287006_panel0" role="region">
		<div class="gi-accordion__panelcontent">First item text content</div>
	</div>

	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287006_panel1" class="gi-accordion__toggle" hidden=""
			id="c_4903212287006_toggle1" type="button">Second item</button>
		<div class="gi-accordion__panelsummary">Second item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287006_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden=""
		id="c_4903212287006_panel1" role="region">
		<div class="gi-accordion__panelcontent">Second item text content</div>
	</div>

	<div class="gi-accordion__panelheader">
		<button aria-controls="c_4903212287006_panel2" class="gi-accordion__toggle" hidden=""
			id="c_4903212287006_toggle2" type="button">Third item</button>
		<div class="gi-accordion__panelsummary">Third item summary text</div>
	</div>
	<div aria-labelledby="c_4903212287006_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden=""
		id="c_4903212287006_panel2" role="region">
		<div class="gi-accordion__panelcontent">Third item text content</div>
	</div>
</div>
<script>gi.accordion.initialise("c_4903212287006");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true" startExpanded="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="summary">#{section.articleHeading} summary text</ui:define>
	<ui:define name="content">#{section.articleHeading} text content</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
	AccordionSettings<Article> settings = new AccordionSettings<Article>()
	{
		Items = Model.ChildArticles,
		Id = null,
		GetUrl = getUrl,
		Heading = (article) => RenderAccordionHeading(article),
		Summary = (article) => RenderAccordionSummary(article),
		Content = (article) => RenderAccordionContent(article),
		AllowMultiple = true,
		StartExpanded = true

	};
}
@helper RenderAccordionHeading(Article article)
{
	@article.ArticleHeading;
}
@helper RenderAccordionSummary(Article article)
{
	@article.ArticleSummary;
}
@helper RenderAccordionContent(Article article)
{
	<p>
		Content region : based on section article.
	</p>
}
@{
	Html.Accordion<Article>(settings);
}

Basic accordions nested in accordion with toggleAll enabled

A demonstration of a more complex setup, featuring a series of simple accordions nestled inside a larger, controllable accordion.

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

First item text content

First child item summary text

Item text content.

Second child item summary text

Third child item summary text

HTML Java .NET

<div class="gi-accordion" id="c_20377977866257" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true" data-start-collapsed="false" data-start-expanded="false">
	<div class="gi-accordion__controls">
		<button class="gi-accordion__toggleall" type="button">
			<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
			<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
		</button>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_20377977866257_panel0" id="c_20377977866257_toggle0" type="button" hidden="">First item</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_20377977866257_toggle0" id="c_20377977866257_panel0">
		<div class="gi-accordion__panelcontent">
			<p>First item text content</p>
			<div class="gi-accordion" id="c_20377978138433" data-allow-multiple="false" data-allow-toggle="false" data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_20377978138433_panel0" id="c_20377978138433_toggle0" type="button" hidden="" aria-disabled="true">First item inner accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_20377978138433_toggle0" id="c_20377978138433_panel0">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377978138433_panel1" id="c_20377978138433_toggle1" type="button" hidden="">Second item inner accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377978138433_toggle1" id="c_20377978138433_panel1" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377978138433_panel2" id="c_20377978138433_toggle2" type="button" hidden="">Third item inner accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377978138433_toggle2" id="c_20377978138433_panel2" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377978138433");</script>
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_20377977866257_panel1" id="c_20377977866257_toggle1" type="button" hidden="">Second item</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377977866257_toggle1" id="c_20377977866257_panel1" hidden="">
		<div class="gi-accordion__panelcontent">
			<p>Second item text content</p>
			<div class="gi-accordion" id="c_20377982736044" data-allow-multiple="false" data-allow-toggle="false" data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_20377982736044_panel0" id="c_20377982736044_toggle0" type="button" hidden="" aria-disabled="true">First item inner accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_20377982736044_toggle0" id="c_20377982736044_panel0">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377982736044_panel1" id="c_20377982736044_toggle1" type="button" hidden="">Second item inner accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377982736044_toggle1" id="c_20377982736044_panel1" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377982736044_panel2" id="c_20377982736044_toggle2" type="button" hidden="">Third item inner accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377982736044_toggle2" id="c_20377982736044_panel2" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377982736044");</script>
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button class="gi-accordion__toggle" aria-controls="c_20377977866257_panel2" id="c_20377977866257_toggle2" type="button" hidden="">Third item</button>
	</div>
	<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377977866257_toggle2" id="c_20377977866257_panel2" hidden="">
		<div class="gi-accordion__panelcontent">
			<p>Third item text content</p>
			<div class="gi-accordion" id="c_20377987978266" data-allow-multiple="false" data-allow-toggle="false" data-allow-toggleall="false" data-start-collapsed="false" data-start-expanded="false">
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-expanded="true" aria-controls="c_20377987978266_panel0" id="c_20377987978266_toggle0" type="button" hidden="" aria-disabled="true">First item inner accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--open" role="region" aria-labelledby="c_20377987978266_toggle0" id="c_20377987978266_panel0">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377987978266_panel1" id="c_20377987978266_toggle1" type="button" hidden="">Second item inner accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377987978266_toggle1" id="c_20377987978266_panel1" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button class="gi-accordion__toggle" aria-controls="c_20377987978266_panel2" id="c_20377987978266_toggle2" type="button" hidden="">Third item inner accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div class="gi-accordion__panel gi-accordion__panel--closed" role="region" aria-labelledby="c_20377987978266_toggle2" id="c_20377987978266_panel2" hidden="">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377987978266");</script>
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_20377977866257");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true" allowToggleAll="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="content">
		<p>#{section.articleHeading} text content</p>
		<comp:accordion items="#{article.relatedArticles.visible}" var="section">
			<ui:define name="heading">#{section.articleHeading} inner accordion</ui:define>
			<ui:define name="summary">#{section.articleSummary}</ui:define>
			<ui:define name="content">Item text content.</ui:define>
		</comp:accordion>
	</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
AccordionSettings<Article> innerAccordionSettings = new AccordionSettings<Article>()
			{
				Items = Model.ChildArticles,
				Id = null,
				GetUrl = getUrl,
				Heading = (article) => RenderInnerAccordionHeading(article),
				Summary = (article) => RenderAccordionSummary(article),
				Content = (article) => RenderInnerAccordionContent(article),
			};

	AccordionSettings<Article> outerAccordionSettings = new AccordionSettings<Article>()
			{
				Items = Model.ChildArticles,
				Id = null,
				GetUrl = getUrl,
				Heading = (article) => RenderOuterAccordionHeading(article),
				Content = (article) => RenderOuterAccordionContent(article, innerAccordionSettings),
				AllowMultiple = true,
				AllowToggleAll = true,
			};

}
@helper RenderOuterAccordionHeading(Article article)
{
@article.ArticleHeading;
}

@helper RenderInnerAccordionHeading(Article article)
{
@article.ArticleHeading; <p>inner accordion</p>
}

@helper RenderAccordionSummary(Article article)
{
@article.ArticleSummary;
}

@helper RenderOuterAccordionContent(Article article, AccordionSettings<Article> settings)
{
	Html.Accordion<Article>(settings);
}

@helper RenderInnerAccordionContent(Article article)
{
<p>
	Content region : based on section article.
</p>
}


@{

	Html.Accordion<Article>(outerAccordionSettings);
}

Complex accordions nested in a complex accordion

A demonstration of a complex scenario with a series of fully interactive accordions nested within a single outer accordion

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

Item text content.

First child item summary text

Item text content.

Second child item summary text

Third child item summary text

HTML Java .NET

<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true" data-start-collapsed="true" data-start-expanded="false" id="c_20377977866258">
	<div class="gi-accordion__controls">
		<button class="gi-accordion__toggleall" type="button">
			<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
			<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
		</button>
	</div>
	<div class="gi-accordion__panelheader">
		<button aria-controls="c_20377977866258_panel0" class="gi-accordion__toggle" hidden="" id="c_20377977866258_toggle0" type="button">First item</button>
	</div>
	<div aria-labelledby="c_20377977866258_toggle0" class="gi-accordion__panel gi-accordion__panel--open" id="c_20377977866258_panel0" role="region">
		<div class="gi-accordion__panelcontent">
			<p>Item text content.</p>
			<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true" data-start-collapsed="true" data-start-expanded="false" id="c_20377978138434">
				<div class="gi-accordion__controls">
					<button class="gi-accordion__toggleall" type="button">
						<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
						<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
					</button>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377978138434_panel0" class="gi-accordion__toggle" hidden="" id="c_20377978138434_toggle0" type="button">First item child accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div aria-labelledby="c_20377978138434_toggle0" class="gi-accordion__panel gi-accordion__panel--open" id="c_20377978138434_panel0" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377978138434_panel1" class="gi-accordion__toggle" hidden="" id="c_20377978138434_toggle1" type="button">Second item child accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div aria-labelledby="c_20377978138434_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377978138434_panel1" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377978138434_panel2" class="gi-accordion__toggle" hidden="" id="c_20377978138434_toggle2" type="button">Third item child accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div aria-labelledby="c_20377978138434_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377978138434_panel2" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377978138434");</script>
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button aria-controls="c_20377977866258_panel1" class="gi-accordion__toggle" hidden="" id="c_20377977866258_toggle1" type="button">Second item</button>
	</div>
	<div aria-labelledby="c_20377977866258_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377977866258_panel1" role="region">
		<div class="gi-accordion__panelcontent">
			<p>Item text content.</p>
			<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true" data-start-collapsed="true" data-start-expanded="false" id="c_20377982736045">
				<div class="gi-accordion__controls">
					<button class="gi-accordion__toggleall" type="button">
						<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
						<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
					</button>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377982736045_panel0" class="gi-accordion__toggle" hidden="" id="c_20377982736045_toggle0" type="button">First item child accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div aria-labelledby="c_20377982736045_toggle0" class="gi-accordion__panel gi-accordion__panel--open" id="c_20377982736045_panel0" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377982736045_panel1" class="gi-accordion__toggle" hidden="" id="c_20377982736045_toggle1" type="button">Second item child accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div aria-labelledby="c_20377982736045_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377982736045_panel1" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377982736045_panel2" class="gi-accordion__toggle" hidden="" id="c_20377982736045_toggle2" type="button">Third item child accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div aria-labelledby="c_20377982736045_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377982736045_panel2" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377982736045");</script>
		</div>
	</div>
	<div class="gi-accordion__panelheader">
		<button aria-controls="c_20377977866258_panel2" class="gi-accordion__toggle" hidden="" id="c_20377977866258_toggle2" type="button">Third item</button>
	</div>
	<div aria-labelledby="c_20377977866258_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377977866258_panel2" role="region">
		<div class="gi-accordion__panelcontent">
			<p>Item text content.</p>
			<div class="gi-accordion" data-allow-multiple="true" data-allow-toggle="false" data-allow-toggleall="true" data-start-collapsed="true" data-start-expanded="false" id="c_20377987978267">
				<div class="gi-accordion__controls">
					<button class="gi-accordion__toggleall" type="button">
						<span class="gi-accordion__toggleall-opentext">Open all<span class="accessibility"> sections</span></span>
						<span class="gi-accordion__toggleall-closetext">Close all<span class="accessibility"> sections</span></span>
					</button>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377987978267_panel0" class="gi-accordion__toggle" hidden="" id="c_20377987978267_toggle0" type="button">First item child accordion</button>
					<div class="gi-accordion__panelsummary">First child item summary text</div>
				</div>
				<div aria-labelledby="c_20377987978267_toggle0" class="gi-accordion__panel gi-accordion__panel--open" id="c_20377987978267_panel0" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377987978267_panel1" class="gi-accordion__toggle" hidden="" id="c_20377987978267_toggle1" type="button">Second item child accordion</button>
					<div class="gi-accordion__panelsummary">Second child item summary text</div>
				</div>
				<div aria-labelledby="c_20377987978267_toggle1" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377987978267_panel1" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
				<div class="gi-accordion__panelheader">
					<button aria-controls="c_20377987978267_panel2" class="gi-accordion__toggle" hidden="" id="c_20377987978267_toggle2" type="button">Third item child accordion</button>
					<div class="gi-accordion__panelsummary">Third child item summary text</div>
				</div>
				<div aria-labelledby="c_20377987978267_toggle2" class="gi-accordion__panel gi-accordion__panel--closed" hidden="" id="c_20377987978267_panel2" role="region">
					<div class="gi-accordion__panelcontent">Item text content.</div>
				</div>
			</div>
			<script>gi.accordion.initialise("c_20377987978267");</script>
		</div>
	</div>
</div>
<script>gi.accordion.initialise("c_20377977866258");</script>

<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true" allowToggleAll="true" startCollapsed="true">
	<ui:define name="heading">#{section.articleHeading}</ui:define>
	<ui:define name="content">
		<p>Item text content.</p>
		<comp:accordion items="#{article.relatedArticles.visible}" var="section" allowMultiple="true" allowToggleAll="true" startCollapsed="true">
			<ui:define name="heading">#{section.articleHeading} inner accordion</ui:define>
			<ui:define name="summary">#{section.articleSummary}</ui:define>
			<ui:define name="content">Item text content.</ui:define>
		</comp:accordion>
	</ui:define>
</comp:accordion>

@{
	Func<string> getUrl = () => Html.Link(Model.ContentArticle);
AccordionSettings<Article> innerAccordionSettings = new AccordionSettings<Article>()
			{
				Items = Model.ChildArticles,
				Id = null,
				GetUrl = getUrl,
				Heading = (article) => RenderInnerAccordionHeading(article),
				Summary = (article) => RenderAccordionSummary(article),
				Content = (article) => RenderInnerAccordionContent(article),
				AllowMultiple = true,
				AllowToggleAll = true,
				StartCollapsed = true,
			};

	AccordionSettings<Article> outerAccordionSettings = new AccordionSettings<Article>()
			{
				Items = Model.ChildArticles,
				Id = null,
				GetUrl = getUrl,
				Heading = (article) => RenderOuterAccordionHeading(article),
				Content = (article) => RenderOuterAccordionContent(article, innerAccordionSettings),
				AllowMultiple = true,
				AllowToggleAll = true,
				StartCollapsed = true
			};

}
@helper RenderOuterAccordionHeading(Article article)
{
@article.ArticleHeading;
}

@helper RenderInnerAccordionHeading(Article article)
{
@article.ArticleHeading; <p>inner accordion</p>
}

@helper RenderAccordionSummary(Article article)
{
@article.ArticleSummary;
}

@helper RenderOuterAccordionContent(Article article, AccordionSettings<Article> settings)
{
	Html.Accordion<Article>(settings);
}

@helper RenderInnerAccordionContent(Article article)
{
<p>
	Content region : based on section article.
</p>
}


@{
	Html.Accordion<Article>(outerAccordionSettings);
}

This website uses cookies

When to use the Accordion

Examples in GOSS products

Accessibility considerations

Additional notes

Basic accordion

Allow multiple attribute

Allow toggle attribute

Allow toggle all attribute

Start collapsed attribute

Start expanded attribute

Basic accordions nested in accordion with toggleAll enabled

Complex accordions nested in a complex accordion

Was this page useful?