The accordion component lets users show and hide sections of content on a page.
Accordions hide content, so the titles need to be clear.
Use the Accordions component to make a page easier to scan when it contains information that only some users will need.
Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.
Do not use the Accordions component for large amounts of content or for complex layouts. Consider if it's better to:
| Name | Type | Description |
|---|---|---|
| accordions | array | Required. An array of accordion items. |
| Name | Type | Description |
|---|---|---|
| title | string | Required. The title of each section. Also used as the JavaScript generated button text. |
| content | string | Required. The text content of each section, which is hidden when the section is closed. |
| heading_tag | string | Heading level, from h1 to h6. Default is h2. |
Ensure the heading_tag used maintains the correct semantic heading structure. If appropriate training is provided, the choice of heading could be set by content authors using a CMS.
{# TODO
Must be an easier way to say if there's one publication within the accordion group show this header before the accordion
#}
{% for accordion in accordions %}
{% if accordion.publications and loop.index == 1 %}
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Publications</h2>
<div class="uol-article-section__content">
{% endif %}
{% endfor %}
{% for accordion in accordions %}
<div class="uol-accordion uol-rich-text">
<{{ accordion.heading_tag if accordion.heading_tag else 'h2' }} class="uol-accordion__title">
{{ accordion.title }}
</{{ accordion.heading_tag if accordion.heading_tag else 'h2' }}>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
{% if accordion.content %}
<div class="uol-rich-text">
{{ accordion.content | safe }}
</div>
{% endif %}
{% if accordion.tables %}
{% render '@uol-index-table', { tables: accordion.tables } %}
{% endif %}
{% if accordion.list %}
<ul>
{% for item in accordion.list %}
<li>
<a href="{{ item.url }}" {% if item.current == true %} aria-current="page" {% endif %}>{{ item.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if accordion.publications %}
{% for publication in accordion.publications %}
{% if loop.index < 6 %}
{% render '@uol-publications-list', publication %}
{% endif %}
{% if loop.index == 6 %}
<a href="{{ accordion.further_publications.link_url }}" class="uol-publications-list__further-link">{{ accordion.further_publications.link_title }}</a>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% for accordion in accordions %}
{% if accordion.publications and loop.index == 1 %}
</div>
</div>
{% endif %}
{% endfor %}
<div class="uol-accordion uol-rich-text">
<h2 class="uol-accordion__title">
Table 1
</h2>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<h2 class="uol-index-table-caption">Cheeses</h2>
<table class="uol-index-table js-uolTableStackable ">
<thead>
<tr>
<th class="uol-index-table__th " data-sortable=true>
Name
</th>
<th class="uol-index-table__th ">
Description
</th>
<th class="uol-index-table__th ">
Country of origin
</th>
<th class="uol-index-table__th uol-index-table__th--numeric " data-sortable=true>
Fat percentage
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uol-index-table__td " data-value="Cheddar">
Cheddar
</td>
<td class="uol-index-table__td " data-value="Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world">
Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world
</td>
<td class="uol-index-table__td " data-value="UK">
UK
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="16%">
16%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Brie">
Brie
</td>
<td class="uol-index-table__td " data-value="Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment">
Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment
</td>
<td class="uol-index-table__td " data-value="France">
France
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="28%">
28%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Edam">
Edam
</td>
<td class="uol-index-table__td " data-value="Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens">
Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens
</td>
<td class="uol-index-table__td " data-value="Netherlands">
Netherlands
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="11%">
11%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Manchego">
Manchego
</td>
<td class="uol-index-table__td " data-value="Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets">
Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets
</td>
<td class="uol-index-table__td " data-value="Spain">
Spain
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="25%">
25%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano">
Parmigiano-Reggiano
</td>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.">
Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.
</td>
<td class="uol-index-table__td " data-value="Italy">
Italy
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="29.7%">
29.7%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cashel Blue">
Cashel Blue
</td>
<td class="uol-index-table__td " data-value="Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.">
Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.
</td>
<td class="uol-index-table__td " data-value="Ireland">
Ireland
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="45%">
45%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stilton">
Stilton
</td>
<td class="uol-index-table__td " data-value="Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.">
Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="35%">
35%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Shropshire Blue">
Shropshire Blue
</td>
<td class="uol-index-table__td " data-value="Shropshire Blue is a cow's milk cheese made in the United Kingdon">
Shropshire Blue is a cow's milk cheese made in the United Kingdon
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Wensleydale">
Wensleydale
</td>
<td class="uol-index-table__td " data-value="Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale">
Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="32%">
32%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cornish Yarg">
Cornish Yarg
</td>
<td class="uol-index-table__td " data-value="Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.">
Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="30%">
30%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stinking Bishop">
Stinking Bishop
</td>
<td class="uol-index-table__td " data-value="Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.">
Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uol-accordion uol-rich-text">
<h2 class="uol-accordion__title">
Table 2
</h2>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<h2 class="uol-index-table-caption">Cheeses</h2>
<table class="uol-index-table js-uolTableStackable ">
<thead>
<tr>
<th class="uol-index-table__th " data-sortable=true>
Name
</th>
<th class="uol-index-table__th ">
Description
</th>
<th class="uol-index-table__th ">
Country of origin
</th>
<th class="uol-index-table__th uol-index-table__th--numeric " data-sortable=true>
Fat percentage
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uol-index-table__td " data-value="Cheddar">
Cheddar
</td>
<td class="uol-index-table__td " data-value="Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world">
Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world
</td>
<td class="uol-index-table__td " data-value="UK">
UK
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="16%">
16%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Brie">
Brie
</td>
<td class="uol-index-table__td " data-value="Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment">
Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment
</td>
<td class="uol-index-table__td " data-value="France">
France
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="28%">
28%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Edam">
Edam
</td>
<td class="uol-index-table__td " data-value="Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens">
Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens
</td>
<td class="uol-index-table__td " data-value="Netherlands">
Netherlands
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="11%">
11%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Manchego">
Manchego
</td>
<td class="uol-index-table__td " data-value="Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets">
Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets
</td>
<td class="uol-index-table__td " data-value="Spain">
Spain
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="25%">
25%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano">
Parmigiano-Reggiano
</td>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.">
Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.
</td>
<td class="uol-index-table__td " data-value="Italy">
Italy
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="29.7%">
29.7%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cashel Blue">
Cashel Blue
</td>
<td class="uol-index-table__td " data-value="Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.">
Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.
</td>
<td class="uol-index-table__td " data-value="Ireland">
Ireland
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="45%">
45%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stilton">
Stilton
</td>
<td class="uol-index-table__td " data-value="Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.">
Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="35%">
35%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Shropshire Blue">
Shropshire Blue
</td>
<td class="uol-index-table__td " data-value="Shropshire Blue is a cow's milk cheese made in the United Kingdon">
Shropshire Blue is a cow's milk cheese made in the United Kingdon
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Wensleydale">
Wensleydale
</td>
<td class="uol-index-table__td " data-value="Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale">
Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="32%">
32%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cornish Yarg">
Cornish Yarg
</td>
<td class="uol-index-table__td " data-value="Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.">
Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="30%">
30%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stinking Bishop">
Stinking Bishop
</td>
<td class="uol-index-table__td " data-value="Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.">
Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="uol-accordion uol-rich-text">
<h2 class="uol-accordion__title">
Table 3
</h2>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<h2 class="uol-index-table-caption">Cheeses</h2>
<table class="uol-index-table js-uolTableStackable ">
<thead>
<tr>
<th class="uol-index-table__th " data-sortable=true>
Name
</th>
<th class="uol-index-table__th ">
Description
</th>
<th class="uol-index-table__th ">
Country of origin
</th>
<th class="uol-index-table__th uol-index-table__th--numeric " data-sortable=true>
Fat percentage
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uol-index-table__td " data-value="Cheddar">
Cheddar
</td>
<td class="uol-index-table__td " data-value="Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world">
Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world
</td>
<td class="uol-index-table__td " data-value="UK">
UK
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="16%">
16%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Brie">
Brie
</td>
<td class="uol-index-table__td " data-value="Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment">
Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment
</td>
<td class="uol-index-table__td " data-value="France">
France
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="28%">
28%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Edam">
Edam
</td>
<td class="uol-index-table__td " data-value="Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens">
Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens
</td>
<td class="uol-index-table__td " data-value="Netherlands">
Netherlands
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="11%">
11%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Manchego">
Manchego
</td>
<td class="uol-index-table__td " data-value="Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets">
Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets
</td>
<td class="uol-index-table__td " data-value="Spain">
Spain
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="25%">
25%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano">
Parmigiano-Reggiano
</td>
<td class="uol-index-table__td " data-value="Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.">
Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months.
</td>
<td class="uol-index-table__td " data-value="Italy">
Italy
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="29.7%">
29.7%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cashel Blue">
Cashel Blue
</td>
<td class="uol-index-table__td " data-value="Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.">
Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb.
</td>
<td class="uol-index-table__td " data-value="Ireland">
Ireland
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="45%">
45%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stilton">
Stilton
</td>
<td class="uol-index-table__td " data-value="Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.">
Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="35%">
35%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Shropshire Blue">
Shropshire Blue
</td>
<td class="uol-index-table__td " data-value="Shropshire Blue is a cow's milk cheese made in the United Kingdon">
Shropshire Blue is a cow's milk cheese made in the United Kingdon
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Wensleydale">
Wensleydale
</td>
<td class="uol-index-table__td " data-value="Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale">
Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term "Yorkshire Wensleydale" can only be used for cheese that is made in Wensleydale
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="32%">
32%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Cornish Yarg">
Cornish Yarg
</td>
<td class="uol-index-table__td " data-value="Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.">
Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="30%">
30%
</td>
</tr>
<tr>
<td class="uol-index-table__td " data-value="Stinking Bishop">
Stinking Bishop
</td>
<td class="uol-index-table__td " data-value="Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.">
Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England.
</td>
<td class="uol-index-table__td " data-value="Uk">
Uk
</td>
<td class="uol-index-table__td uol-index-table__td--type-numeric" data-value="48%">
48%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
// All accordion styling is js dependent. If no js use default styling
.js {
.uol-accordion {
position: relative;
border-top: 1px solid $color-border--light;
border-bottom: 1px solid $color-border--light;
opacity: 0;
transition: opacity 0.3s ease;
margin-top: $spacing-6;
margin-bottom: $spacing-6;
@include media(">=uol-media-m") {
margin-bottom: $spacing-7;
}
+ .uol-accordion {
border-top: none;
margin-top: -#{$spacing-6};
@include media(">=uol-media-m") {
margin-top: -#{$spacing-7};
}
}
}
.uol-accordion--group-heading {
margin: $spacing-6 0 $spacing-2;
padding-bottom: $spacing-2;
@include media(">=uol-media-m") {
margin: $spacing-7 0 $spacing-4;
padding-bottom: $spacing-4;
}
}
.uol-accordion__title {
@extend %text-size-paragraph;
@extend %uol-font-sans-serif;
font-weight: $font-weight-bold--sans-serif;
margin: 0;
}
.uol-accordion__btn {
width: 100%;
text-align: inherit;
font-weight: inherit;
background: none;
border: none;
padding: $spacing-4 $spacing-6 $spacing-4 0;
color: inherit;
&::before,
&::after {
content: "";
width: 0.7em;
height: 2px;
position: absolute;
top: 1.4em;
right: $spacing-2;
background: $color-black;
transition: transform 0.3s ease;
@media (forced-colors: active) {
border: 1px solid transparent;
}
@media (-ms-high-contrast: active) {
border: 1px solid WindowText;
}
}
&::after {
transform: rotate(0deg);
}
&:hover,
&:focus {
text-decoration: underline;
}
&[aria-expanded="false"] {
&::after {
transform: rotate(90deg);
}
}
&[aria-expanded="true"] {
&::after {
transform: rotate(180deg);
}
}
}
.uol-accordion__content {
position: relative;
transition: max-height 0.5s ease;
overflow-y: hidden;
*:last-child {
margin-bottom: 0;
}
}
.uol-accordion__content-inner {
padding-bottom: $spacing-5;
}
}
export default () => {
//
const accordions = document.querySelectorAll('.uol-accordion')
accordions.forEach( (accordion) => {
// Get heading
const accordionHeading = accordion.querySelector('.uol-accordion__title')
// Get content
const accordionContent = accordion.querySelector('.uol-accordion__content')
// Wrap heading inner with button
accordionHeading.innerHTML = `
<button type="button" class="uol-accordion__btn uol-accordion__btn--expand" aria-expanded="false">
${accordionHeading.textContent}
</button>
`
// Get button we've just created
const toggleBtn = accordionHeading.querySelector('.uol-accordion__btn')
// Hides the content to prevent FOC
accordionContent.style.opacity = 0
// Get content height
let accordionContentHeight;
accordionContentHeight = accordionContent.clientHeight;
setTimeout(() => {
accordionContent.style.visibility = 'hidden';
accordionContent.style.maxHeight = '0px';
}, 100);
accordion.style.opacity = '1'
// Toggle
toggleBtn.onclick = () => {
accordionContent.style.opacity = 1
let expanded = toggleBtn.getAttribute('aria-expanded') === 'true' || false
toggleBtn.setAttribute('aria-expanded', !expanded)
if (!expanded) {
accordionContent.classList.add('uol-accordion__content--expanded')
accordionContent.style.visibility = 'visible'
console.log('height check ' + accordionContentHeight)
accordionContent.style.maxHeight = '100%'
} else {
accordionContent.classList.remove('uol-accordion__content--expanded')
accordionContent.style.maxHeight = '0px'
setTimeout(function() {
accordionContent.style.visibility = 'hidden';
}, 100)
}
}
})
}
{
"accordions": [
{
"title": "Table 1",
"tables": [
{
"stackable": true,
"caption": "Cheeses",
"headings": [
{
"sortable": true,
"label": "Name"
},
{
"label": "Description"
},
{
"label": "Country of origin"
},
{
"sortable": true,
"numeric": true,
"label": "Fat percentage"
}
],
"rows": [
{
"cells": [
{
"content": "Cheddar"
},
{
"content": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
},
{
"content": "UK"
},
{
"type": "numeric",
"content": "16%"
}
]
},
{
"cells": [
{
"content": "Brie"
},
{
"content": "Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment"
},
{
"content": "France"
},
{
"type": "numeric",
"content": "28%"
}
]
},
{
"cells": [
{
"content": "Edam"
},
{
"content": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens"
},
{
"content": "Netherlands"
},
{
"type": "numeric",
"content": "11%"
}
]
},
{
"cells": [
{
"content": "Manchego"
},
{
"content": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets"
},
{
"content": "Spain"
},
{
"type": "numeric",
"content": "25%"
}
]
},
{
"cells": [
{
"content": "Parmigiano-Reggiano"
},
{
"content": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months."
},
{
"content": "Italy"
},
{
"type": "numeric",
"content": "29.7%"
}
]
},
{
"cells": [
{
"content": "Cashel Blue"
},
{
"content": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
},
{
"content": "Ireland"
},
{
"type": "numeric",
"content": "45%"
}
]
},
{
"cells": [
{
"content": "Stilton"
},
{
"content": "Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "35%"
}
]
},
{
"cells": [
{
"content": "Shropshire Blue"
},
{
"content": "Shropshire Blue is a cow's milk cheese made in the United Kingdon"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
},
{
"cells": [
{
"content": "Wensleydale"
},
{
"content": "Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term \"Yorkshire Wensleydale\" can only be used for cheese that is made in Wensleydale"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "32%"
}
]
},
{
"cells": [
{
"content": "Cornish Yarg"
},
{
"content": "Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "30%"
}
]
},
{
"cells": [
{
"content": "Stinking Bishop"
},
{
"content": "Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
}
]
}
]
},
{
"title": "Table 2",
"tables": [
{
"stackable": true,
"caption": "Cheeses",
"headings": [
{
"sortable": true,
"label": "Name"
},
{
"label": "Description"
},
{
"label": "Country of origin"
},
{
"sortable": true,
"numeric": true,
"label": "Fat percentage"
}
],
"rows": [
{
"cells": [
{
"content": "Cheddar"
},
{
"content": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
},
{
"content": "UK"
},
{
"type": "numeric",
"content": "16%"
}
]
},
{
"cells": [
{
"content": "Brie"
},
{
"content": "Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment"
},
{
"content": "France"
},
{
"type": "numeric",
"content": "28%"
}
]
},
{
"cells": [
{
"content": "Edam"
},
{
"content": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens"
},
{
"content": "Netherlands"
},
{
"type": "numeric",
"content": "11%"
}
]
},
{
"cells": [
{
"content": "Manchego"
},
{
"content": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets"
},
{
"content": "Spain"
},
{
"type": "numeric",
"content": "25%"
}
]
},
{
"cells": [
{
"content": "Parmigiano-Reggiano"
},
{
"content": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months."
},
{
"content": "Italy"
},
{
"type": "numeric",
"content": "29.7%"
}
]
},
{
"cells": [
{
"content": "Cashel Blue"
},
{
"content": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
},
{
"content": "Ireland"
},
{
"type": "numeric",
"content": "45%"
}
]
},
{
"cells": [
{
"content": "Stilton"
},
{
"content": "Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "35%"
}
]
},
{
"cells": [
{
"content": "Shropshire Blue"
},
{
"content": "Shropshire Blue is a cow's milk cheese made in the United Kingdon"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
},
{
"cells": [
{
"content": "Wensleydale"
},
{
"content": "Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term \"Yorkshire Wensleydale\" can only be used for cheese that is made in Wensleydale"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "32%"
}
]
},
{
"cells": [
{
"content": "Cornish Yarg"
},
{
"content": "Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "30%"
}
]
},
{
"cells": [
{
"content": "Stinking Bishop"
},
{
"content": "Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
}
]
}
]
},
{
"title": "Table 3",
"tables": [
{
"stackable": true,
"caption": "Cheeses",
"headings": [
{
"sortable": true,
"label": "Name"
},
{
"label": "Description"
},
{
"label": "Country of origin"
},
{
"sortable": true,
"numeric": true,
"label": "Fat percentage"
}
],
"rows": [
{
"cells": [
{
"content": "Cheddar"
},
{
"content": "Cheddar cheese is a relatively hard, off-white, sometimes sharp-tasting, natural cheese. Originating in the English village of Cheddar in Somerset, cheeses of this style are now produced beyond the region and in several countries around the world"
},
{
"content": "UK"
},
{
"type": "numeric",
"content": "16%"
}
]
},
{
"cells": [
{
"content": "Brie"
},
{
"content": "Brie is a soft cow's-milk cheese named after Brie, the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of white mould. The rind is typically eaten, with its flavor depending largely upon the ingredients used and its manufacturing environment"
},
{
"content": "France"
},
{
"type": "numeric",
"content": "28%"
}
]
},
{
"cells": [
{
"content": "Edam"
},
{
"content": "Edam is a semi-hard cheese that originated in the Netherlands, and is named after the town of Edam in the province of North Holland. Edam is traditionally sold in rounded cylinders with a pale yellow interior and a coat, or rind, of red paraffin wax. Edam ages and travels well, and does not spoil; it only hardens"
},
{
"content": "Netherlands"
},
{
"type": "numeric",
"content": "11%"
}
]
},
{
"cells": [
{
"content": "Manchego"
},
{
"content": "Manchego is a cheese made in the La Mancha region of Spain from the milk of sheep of the Manchega breed. It is aged between 60 days and 2 years. Manchego has a firm and compact consistency and a buttery texture, and often contains small, unevenly distributed air pockets"
},
{
"content": "Spain"
},
{
"type": "numeric",
"content": "25%"
}
]
},
{
"cells": [
{
"content": "Parmigiano-Reggiano"
},
{
"content": "Parmigiano-Reggiano or Parmesan is an Italian hard, granular cheese that is produced from cow's milk and has aged 12-36 months."
},
{
"content": "Italy"
},
{
"type": "numeric",
"content": "29.7%"
}
]
},
{
"cells": [
{
"content": "Cashel Blue"
},
{
"content": "Cashel Blue is a hand-made, semi-soft, blue veined, medium-strength blue cheese with a creamy texture. Cashel Blue was the first Irish blue cheese, named after the Rock of Cashel overlooking the pastures close to the cheese farm of the family Grubb."
},
{
"content": "Ireland"
},
{
"type": "numeric",
"content": "45%"
}
]
},
{
"cells": [
{
"content": "Stilton"
},
{
"content": "Stilton is an English cheese, produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "35%"
}
]
},
{
"cells": [
{
"content": "Shropshire Blue"
},
{
"content": "Shropshire Blue is a cow's milk cheese made in the United Kingdon"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
},
{
"cells": [
{
"content": "Wensleydale"
},
{
"content": "Wensleydale is a style of cheese originally produced in Wensleydale, North Yorkshire, England, but now mostly made in large commercial creameries throughout the UK. The term \"Yorkshire Wensleydale\" can only be used for cheese that is made in Wensleydale"
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "32%"
}
]
},
{
"cells": [
{
"content": "Cornish Yarg"
},
{
"content": "Semi-hard cow's milk cheese made in Cornwall from the milk of Friesian cows. Before being left to mature, this cheese is wrapped in nettle leaves to form an edible, though mouldy, rind."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "30%"
}
]
},
{
"cells": [
{
"content": "Stinking Bishop"
},
{
"content": "Award-winning, washed-rind cheese produced since 1994 by Charles Martell and Son at Hunts Court Farm, Dymock, Gloucestershire, in the south west of England."
},
{
"content": "Uk"
},
{
"type": "numeric",
"content": "48%"
}
]
}
]
}
]
}
]
}