<commit_before># aria-collapsible

[![npm version](https://badge.fury.io/js/aria-collapsible.svg)](https://badge.fury.io/js/aria-collapsible)

A lightweight, dependency-free JavaScript module for generating progressively-enhanced collapsible regions using [ARIA States and Properties](http://www.w3.org/TR/wai-aria/states_and_properties).

### Key Features

- Uses ARIA States and Properties
- Dependency-free
- AMD/CommonJS module support

aria-collapsible is also really tiny:

<table>
	<tbody>
		<tr>
			<th>Uncompressed</th>
			<td>1,573 bytes</td>
		</tr>
		<tr>
			<th>Minified</th>
			<td>1,054 bytes</td>
		</tr>
		<tr>
			<th>Minifed and gzipped</th>
			<td>588 bytes</td>
		</tr>
	</tbody>
</table>


## Getting aria-collapsible

Adding aria-collapsible to your project is easy! You've got a couple options:

- [Download a tagged version](https://github.com/jgarber623/aria-collapsible/tags) from GitHub and do it yourself _(old school)_.
- Install via [Bower](http://bower.io/): `bower install aria-collapsible`
- Install via [npm](https://www.npmjs.com/): `npm install aria-collapsible`


## Usage

### HTML

To use aria-collapsible, your markup needs two elements: a **control** and a **region**. The **control**, typically a `<button>` or an `<a>` element, is what your user will interact with and is the element that controls the display of the collapsible region. The **region** is an element elsewhere on the page whose display is handled by the **control**.

The two elements are associated by adding an `aria-controls="region"` attribute to the **control**. The value of the `aria-controls` attribute corresponds to the value of the **region**'s `id` attribute.

```html
<button type="button" aria-controls="region" aria-expanded="false" id="control">Menu</button><commit_msg>Update example markup in README.md.<commit_after># aria-collapsible

[![npm version](https://badge.fury.io/js/aria-collapsible.svg)](https://badge.fury.io/js/aria-collapsible)

A lightweight, dependency-free JavaScript module for generating progressively-enhanced collapsible regions using [ARIA States and Properties](http://www.w3.org/TR/wai-aria/states_and_properties).

### Key Features

- Uses ARIA States and Properties
- Dependency-free
- AMD/CommonJS module support

aria-collapsible is also really tiny:

<table>
	<tbody>
		<tr>
			<th>Uncompressed</th>
			<td>1,573 bytes</td>
		</tr>
		<tr>
			<th>Minified</th>
			<td>1,054 bytes</td>
		</tr>
		<tr>
			<th>Minifed and gzipped</th>
			<td>588 bytes</td>
		</tr>
	</tbody>
</table>


## Getting aria-collapsible

Adding aria-collapsible to your project is easy! You've got a couple options:

- [Download a tagged version](https://github.com/jgarber623/aria-collapsible/tags) from GitHub and do it yourself _(old school)_.
- Install via [Bower](http://bower.io/): `bower install aria-collapsible`
- Install via [npm](https://www.npmjs.com/): `npm install aria-collapsible`


## Usage

### HTML

To use aria-collapsible, your markup needs two elements: a **control** and a **region**. The **control**, typically a `<button>` or an `<a>` element, is what your user will interact with and is the element that controls the display of the collapsible region. The **region** is an element elsewhere on the page whose display is handled by the **control**.

The two elements are associated by adding an `aria-controls="region"` attribute to the **control**. The value of the `aria-controls` attribute corresponds to the value of the **region**'s `id` attribute.

```html
<button type="button" aria-controls="region" aria-expanded="true" aria-hidden id="control">Menu</button>
{'fraction_non_alphanumeric': 0.1399392768423958, 'fraction_numerical': 0.008280430582390284, 'mean_word_length': 4.532824427480916, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2507537', 'n_tokens_mistral': 1229, 'n_tokens_neox': 1135, 'n_words': 378}