Accordion

A vertical item with hidden content.

Demos

Configurable

Name	Value
Props
actionIcon
actionAlwaysVisible
Slots
default
description
title
View
Reading direction	Left to right (LTR) Right to left (RTL)
Note: For icon properties, the relevant icon also needs to be imported from the `@wikimedia/codex-icons` package. See the usage documentation for more information.

Default

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With description

NPMMediaWiki

vue

<template>
	<cdx-accordion>
		<template #title>
			Accordion title
		</template>
		<template #description>
			This is a description for the accordion
		</template>
		<p>
			The accordion content can be as longer as needed, and the type of content can vary
			according to the need of each use case.
		</p>
		<p>Headings should be used to label each section of content</p>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			This is a very long title which should be moved to the next line if there is not
			enough space
		</template>
		<template #description>
			The description can be a very long and sometimes it is needed to wrap it to the next
			line
		</template>
		<p>A paragraph can be added here with a short or long informative text.</p>
		<p>
			Another paragraph can be added here with a short or long informative text.
			There is no limit to the length of the paragraphs.
		</p>
	</cdx-accordion>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxAccordion } from '@wikimedia/codex';

export default defineComponent( {
	name: 'AccordionDescription',
	components: { CdxAccordion }
} );
</script>

vue

<template>
	<cdx-accordion>
		<template #title>
			Accordion title
		</template>
		<template #description>
			This is a description for the accordion
		</template>
		<p>
			The accordion content can be as longer as needed, and the type of content can vary
			according to the need of each use case.
		</p>
		<p>Headings should be used to label each section of content</p>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			This is a very long title which should be moved to the next line if there is not
			enough space
		</template>
		<template #description>
			The description can be a very long and sometimes it is needed to wrap it to the next
			line
		</template>
		<p>A paragraph can be added here with a short or long informative text.</p>
		<p>
			Another paragraph can be added here with a short or long informative text.
			There is no limit to the length of the paragraphs.
		</p>
	</cdx-accordion>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxAccordion } = require( '@wikimedia/codex' );

// @vue/component
module.exports = defineComponent( {
	name: 'AccordionDescription',
	components: { CdxAccordion }
} );
</script>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Stacked

It's possible to stack accordions by adding them next to each other in the markup.

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With action button

To add an action button to the accordion, pass the actionButton prop. The button is placed in the top right corner of the accordion, and it emits an event actionButtonClicked when clicked.

TIP

If you are displaying an action button, make sure to provide a label for this button for accessibility purposes by using the actionButtonLabel prop.

NPMMediaWiki

vue

<template>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title which is very long and will be properly wrapped to the next line
		</template>
		Accordion content
	</cdx-accordion>
	<br>
	<p v-if="showHandleButtonClickResult">
		Action button clicked
	</p>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxAccordion } from '@wikimedia/codex';
import { cdxIconEdit } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'AccordionActionButton',
	components: { CdxAccordion },
	setup() {
		const showHandleButtonClickResult = ref( false );
		const handleButtonClick = () => {
			showHandleButtonClickResult.value = true;
			setTimeout( () => {
				showHandleButtonClickResult.value = false;
			}, 2000 );
		};

		return {
			cdxIconEdit,
			handleButtonClick,
			showHandleButtonClickResult
		};
	}
} );
</script>

vue

<template>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title which is very long and will be properly wrapped to the next line
		</template>
		Accordion content
	</cdx-accordion>
	<br>
	<p v-if="showHandleButtonClickResult">
		Action button clicked
	</p>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxAccordion } = require( '@wikimedia/codex' );
const { cdxIconEdit } = require( './icons.json' );

// @vue/component
module.exports = defineComponent( {
	name: 'AccordionActionButton',
	components: { CdxAccordion },
	setup() {
		const showHandleButtonClickResult = ref( false );
		const handleButtonClick = () => {
			showHandleButtonClickResult.value = true;
			setTimeout( () => {
				showHandleButtonClickResult.value = false;
			}, 2000 );
		};

		return {
			cdxIconEdit,
			handleButtonClick,
			showHandleButtonClickResult
		};
	}
} );
</script>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With always visible action

To show the icon even when the accordion is collapsed, set the actionAlwaysVisible prop.

NPMMediaWiki

vue

<template>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<br>
	<p v-if="showHandleButtonClickResult">
		Action button clicked
	</p>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxAccordion } from '@wikimedia/codex';
import { cdxIconEdit } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'AccordionActionVisible',
	components: { CdxAccordion },
	setup() {
		const showHandleButtonClickResult = ref( false );
		const handleButtonClick = () => {
			showHandleButtonClickResult.value = true;
			setTimeout( () => {
				showHandleButtonClickResult.value = false;
			}, 2000 );
		};

		return {
			cdxIconEdit,
			handleButtonClick,
			showHandleButtonClickResult
		};
	}
} );
</script>

vue

<template>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<cdx-accordion
		:action-icon="cdxIconEdit"
		action-always-visible
		action-button-label="Edit"
		@action-button-click="handleButtonClick"
	>
		<template #title>
			Accordion title
		</template>
		Accordion content
	</cdx-accordion>
	<br>
	<p v-if="showHandleButtonClickResult">
		Action button clicked
	</p>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxAccordion } = require( '@wikimedia/codex' );
const { cdxIconEdit } = require( './icons.json' );

// @vue/component
module.exports = defineComponent( {
	name: 'AccordionActionVisible',
	components: { CdxAccordion },
	setup() {
		const showHandleButtonClickResult = ref( false );
		const handleButtonClick = () => {
			showHandleButtonClickResult.value = true;
			setTimeout( () => {
				showHandleButtonClickResult.value = false;
			}, 2000 );
		};

		return {
			cdxIconEdit,
			handleButtonClick,
			showHandleButtonClickResult
		};
	}
} );
</script>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With different content

The accordion can be used with different elements, including images or tables.

	Rex	Bella	Max	Lola
Breed	German Shepherd	Golden Retriever	Bulldog	Nova Scotia
Age	5	3	7	2
Owner	John	Sarah	Michael	Emily
Eating Habits	Healthy appetite	Picky eater	Enjoys treats	Loves homemade meals

NPMMediaWiki

vue

<template>
	<cdx-accordion>
		<template #title>
			Accordion with an image
		</template>
		<img
			alt="mediawiki logo"
			src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/MediaWiki-2020-logo.svg/1920px-MediaWiki-2020-logo.svg.png"
		>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			Accordion with a table
		</template>
		<table>
			<tr>
				<th>&nbsp;</th>
				<th>Rex</th>
				<th>Bella</th>
				<th>Max</th>
				<th>Lola</th>
			</tr>
			<tr>
				<th>Breed</th>
				<td>German Shepherd</td>
				<td>Golden Retriever</td>
				<td>Bulldog</td>
				<td>Nova Scotia</td>
			</tr>
			<tr>
				<th>Age</th>
				<td>5</td>
				<td>3</td>
				<td>7</td>
				<td>2</td>
			</tr>
			<tr>
				<th>Owner</th>
				<td>John</td>
				<td>Sarah</td>
				<td>Michael</td>
				<td>Emily</td>
			</tr>
			<tr>
				<th>Eating Habits</th>
				<td>Healthy appetite</td>
				<td>Picky eater</td>
				<td>Enjoys treats</td>
				<td>Loves homemade meals</td>
			</tr>
		</table>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			Accordion with a textarea
		</template>
		<cdx-text-area placeholder="Start typing..." />
	</cdx-accordion>
</template>

<script>
import { defineComponent } from 'vue';
import { CdxAccordion, CdxTextArea } from '@wikimedia/codex';

export default defineComponent( {
	name: 'AccordionDifferentContent',
	components: { CdxAccordion, CdxTextArea }
} );
</script>

vue

<template>
	<cdx-accordion>
		<template #title>
			Accordion with an image
		</template>
		<img
			alt="mediawiki logo"
			src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/MediaWiki-2020-logo.svg/1920px-MediaWiki-2020-logo.svg.png"
		>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			Accordion with a table
		</template>
		<table>
			<tr>
				<th>&nbsp;</th>
				<th>Rex</th>
				<th>Bella</th>
				<th>Max</th>
				<th>Lola</th>
			</tr>
			<tr>
				<th>Breed</th>
				<td>German Shepherd</td>
				<td>Golden Retriever</td>
				<td>Bulldog</td>
				<td>Nova Scotia</td>
			</tr>
			<tr>
				<th>Age</th>
				<td>5</td>
				<td>3</td>
				<td>7</td>
				<td>2</td>
			</tr>
			<tr>
				<th>Owner</th>
				<td>John</td>
				<td>Sarah</td>
				<td>Michael</td>
				<td>Emily</td>
			</tr>
			<tr>
				<th>Eating Habits</th>
				<td>Healthy appetite</td>
				<td>Picky eater</td>
				<td>Enjoys treats</td>
				<td>Loves homemade meals</td>
			</tr>
		</table>
	</cdx-accordion>
	<cdx-accordion>
		<template #title>
			Accordion with a textarea
		</template>
		<cdx-text-area placeholder="Start typing..."></cdx-text-area>
	</cdx-accordion>
</template>

<script>
const { defineComponent } = require( 'vue' );
const { CdxAccordion, CdxTextArea } = require( '@wikimedia/codex' );

// @vue/component
module.exports = defineComponent( {
	name: 'AccordionDifferentContent',
	components: { CdxAccordion, CdxTextArea }
} );
</script>

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

With different heading levels

The accordion heading can be changed to any heading level by passing the headingLevel prop.

Name	Value
View
Reading direction	Left to right (LTR) Right to left (RTL)

Usage

Props

Prop name	Description	Type	Values	Default
`actionAlwaysVisible`	Forces the accordion to show the action icon.	`boolean`	`'true'`, `'false'`	`false`
`actionIcon`	The icon that will be displayed on the right side of the accordion header when expanded.	`Icon`	-	`null`
`actionButtonLabel`	Label for the action button. If an action icon is being used, then a label for that icon should be provided for ARIA support.	`string`	-	`''`
`headingLevel`	The heading level of the accordion title.	`HeadingLevel`	`'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	`'h3'`

Events

Event name	Properties	Description
`action-button-click`		When the action button is clicked.

Slots

Name	Description	Bindings
title	Customizable Accordion title
description	Customizable Accordion description
default	Customizable Accordion content

Accordion ​

Demos ​

Configurable ​

Customizable accordion component title

Default ​

Accordion title

This is a very long title which should be moved to the next line if there is not enough space

With description ​

Accordion title This is a description for the accordion

This is a very long title which should be moved to the next line if there is not enough space The description can be a very long and sometimes it is needed to wrap it to the next line

Stacked ​

Accordion title 1

Accordion title 2

Accordion title 3

With action button ​

Accordion title

Accordion title which is very long and will be properly wrapped to the next line

With always visible action ​

Accordion title Edit

Accordion title Edit

Accordion title Edit

With different content ​

Accordion with an image

Accordion with a table

Accordion with a textarea

With different heading levels ​

Accordion heading h2

Accordion heading h4

Accordion heading h5

Usage ​

Props ​

Events ​

Slots ​

Accordion

Demos

Configurable

Default

With description

Stacked

With action button

With always visible action

With different content

With different heading levels

Usage

Props

Events

Slots