<commit_before># jquery.urkel.js

Urkel is a jQuery plugin for creating simple accordions.

## Default Usage

JavaScript:

	$('.accordion').urkel();

HTML:

	<div class="accordion">

		<h3><a href="#id1">Title</a></h3>
		<div id="id1">
			<p>Content</p>
		</div>

		<h3><a href="#id2">Title</a></h3>
		<div id="id2">
			<p>Content</p>
		</div>

	</div>
	
CSS:

	h3.collapsed a:after{ content: "\25BC"; }
	h3.expanded a:after{ content: "\25B2"; }
	
## Custom Usage

JavaScript:

	$('.accordion').urkel({
		title : '.title',
		title_closed_class : 'closed',
		title_open_class : 'open',
		content : '.content',
		speed : 'fast'
	});
	
HTML:

	<div class="accordion">

		<div class="title"><a href="#id1">Title</a></div>
		<div class="content" id="id1">
			<p>Content</p>
		</div>

		<div class="title"><a href="#id2">Title</a></div>
		<div class="content" id="id2">
			<p>Content</p>
		</div>

	</div>
	
CSS:

	.title.closed a:after{ content: "\25BC"; }
	.title.open a:after{ content: "\25B2"; }
	
## Options

### title

The HTML element to be used as the title. Examples: h3, .title

Default value: h3

---

### title_closed_class

The class to be used on the **title** element when closed/collapsed. Simply a hook for styling.

Default value: collapsed

---

### title_open_class

The class to be used on the **title** element when opened/expanded. Simply a hook for styling.

Default value: expanded

---

### content

The HTML element to be used to wrap the content. Examples: div, .content

Default value: div

---

### speed

The speed (in milliseconds) at which the accordion slides open/closed. You can also use the values 'fast' or 'slow'.

Default value: 500

## Demo

[View Urkel in action](http://thomasthesecond.github.com/urkel).<commit_msg>Updated README with three new options (accordion, has_container, container_element).<commit_after># jquery.urkel.js

Urkel is a jQuery plugin for creating simple accordions.

## Default Usage

JavaScript:

	$('.accordion').urkel();

HTML:

	<div class="accordion">

		<h3><a href="#id1">Title</a></h3>
		<div id="id1">
			<p>Content</p>
		</div>

		<h3><a href="#id2">Title</a></h3>
		<div id="id2">
			<p>Content</p>
		</div>

	</div>
	
CSS:

	h3.collapsed a:after{ content: "\25BC"; }
	h3.expanded a:after{ content: "\25B2"; }
	
## Custom Usage

JavaScript:

	$('.accordion').urkel({
		title : '.title',
		title_closed_class : 'closed',
		title_open_class : 'open',
		content : '.content',
		speed : 'fast'
	});
	
HTML:

	<div class="accordion">

		<div class="title"><a href="#id1">Title</a></div>
		<div class="content" id="id1">
			<p>Content</p>
		</div>

		<div class="title"><a href="#id2">Title</a></div>
		<div class="content" id="id2">
			<p>Content</p>
		</div>

	</div>
	
CSS:

	.title.closed a:after{ content: "\25BC"; }
	.title.open a:after{ content: "\25B2"; }

## Custom Usage with Container

JavaScript:

	$('.accordion').urkel({
		has_container: true,
		container_element: '.container'
	});
	
HTML:

	<div class="accordion">

		<div class="container">
			<h3><a href="#id1">Title</a></h3>
			<div id="id1">
				<p>Content</p>
			</div>
		</div>

		<div class="container">
			<h3><a href="#id2">Title</a></h3>
			<div id="id2">
				<p>Content</p>
			</div>
		</div>

	</div>
	
## Options

### accordion (boolean)

Whether or not to use an accordion; i.e., only one element open at a time. Accepts either true or false.

Default value: true

---

### has_container (boolean)

Whether or not the **title** and **content** elements are wrapped in a containing element. Accepts either true or false.

Default value: false

---

### container_element (string)

The HTML element to be used as the container. Examples: 'div', '.container'

NOTE: This option is required if **has_container** is true.

Default value: null

---

### title (string)

The HTML element to be used as the title. Examples: 'h3', '.title'

Default value: 'h3'

---

### title_closed_class (string)

The class to be used on the **title** element when closed/collapsed. Simply a hook for styling.

Default value: 'collapsed'

---

### title_open_class (string)

The class to be used on the **title** element when opened/expanded. Simply a hook for styling.

Default value: 'expanded'

---

### content (string)

The HTML element to be used to wrap the content. Examples: div, .content

Default value: 'div'

---

### speed (integer or string)

The speed (in milliseconds) at which the accordion slides open/close. You can also use the values 'fast' or 'slow'.

Default value: 500

## Demo

[View Urkel in action](http://thomasthesecond.github.com/urkel).
{'fraction_non_alphanumeric': 0.17599651492049662, 'fraction_numerical': 0.014375952951426704, 'mean_word_length': 3.6477732793522266, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 97, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6129271', 'n_tokens_mistral': 1789, 'n_tokens_neox': 1624, 'n_words': 491}