[ KAWWA PORTAL ] Components : Accordion

Blocks

Accordion

Class name: (k-accordion)
Version: 1.2
jQuery Interactive feature
Tapestry Integration

Accordion blocks may be used whenever you have a group of blocks with content of the same nature.

With accordions, the user is able to open only one block at a time (opening a closed panel closes the already opened one). By default, the first block is opened on page load.

Remember to adjust the level of the title to the structure of your document (use The HTML5 Outliner to check and finetune your document outline).

Demo
Snippets
Tapestry Integration

Accordion Block

This is an alternative to sliding panels or to info blocks.

Accordions go by groups of blocks, and only one block is opened at a time.

Accordion Block

This block may be used to all transversal info.

You may use it also for a list of links:

Accordion Block

This block may be used to all transversal info.

You may use it also for a list of links:

HTML5 Plain Code

COPY

```
<div class="k-accordion">
```

	<h3 class="control"><a href="#">Accordion Block</a></h3>

```
	<div class="content">
```

		<p>This is an alternative to sliding panels or to info blocks.</p>

		<p>Accordions go by groups of blocks, and only one block is opened at a time.</p>

```
	</div>
```

	<h3 class="control"><a href="#">Accordion Block</a></h3>

```
	<div class="content">
```

		<p>This block may be used to all transversal info.</p>

		<p>You may use it also for a list of links:</p>

```
		<ul class="k-links-list">
```

			<li><a href="#">Link example</a></li>

			<li><a href="#">Another link example</a></li>

```
		</ul>
```
```
	</div>
```

	<h3 class="control"><a href="#">Accordion Block</a></h3>

```
	<div class="content">
```

		<p>This block may be used to all transversal info.</p>

		<p>You may use it also for a list of links:</p>

```
		<ul class="k-links-list">
```

			<li><a href="#">Link example</a></li>

			<li><a href="#">Another link example</a></li>

```
		</ul>
```
```
	</div>
```
```
</div>
```
```
							
```

CSS Code

COPY

```
.k-accordion {
```
```
  clear: both;
```
```
  margin-bottom: 2em;
```
```
  border-bottom: 4px solid black;
```
```
}
```
```
.k-accordion .control {
```
```
  font-size: 1em;
```
```
  text-transform: uppercase;
```
```
  padding: 1px 0;
```
```
  margin: 0;
```
```
}
```

.k-accordion .control a, .k-accordion .control a:link, .k-accordion .control a:visited {

```
  display: block;
```
```
  text-decoration: none;
```
```
  color: white;
```

  background: #999 url(../img/k-theme0/unfold.svg) right 0.45em no-repeat;

```
  padding: 0.5em 28px 0.5em 0.7em;
```
```
  cursor: pointer;
```
```
}
```

.k-accordion .control a:focus, .k-accordion .control a:focus {

```
  color: white;
```
```
  background-color: #a40800;
```
```
}
```

.k-accordion .control a.active, .k-accordion .control a.active:link, .k-accordion .control a.active:visited {

```
  color: white;
```
```
  background: black;
```
```
}
```

.k-accordion .control a.active:focus, .k-accordion .control a.active:focus {

```
  color: white;
```
```
  background-color: #a40800;
```
```
}
```
```
.k-accordion div.content {
```
```
  margin: 1em;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if(jQuery.fn.kAccordion) {
```

			jQuery( ".k-accordion" ).kAccordion();

```
		}
```
```
	});
```
```
})(jQuery);
```

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

NB: Those components belong to the tapestry5-jquery project, please have a look to the official website.

Accordion Mixin parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
options	false	JSONObject	prop		The JSON option for the jQuery widget.

The Template

COPY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```
```
<body>
```

	<div t:type="any"  t:mixins="kawwa2/accordion"  class="k-accordion">

```
		
```

		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>

```
		<div class="content">
```

			<p>This is an alternative to sliding panels or to info blocks.</p>

			<p>Accordions go by groups of blocks, and only one block is opened at a time.</p>

```
		</div>
```
```
		
```

		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>

```
		<div class="content">
```

			<p>This block may be used to all transversal info.</p>

			<p>You may use it also for a list of links:</p>

```
			<ul class="k-links-list">
```

				<li><a href="#">Link example</a></li>

				<li><a href="#">Another link example</a></li>

```
			</ul>
```
```
		</div>
```
```
		
```

		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>

```
		<div class="content">
```

			<p>This block may be used to all transversal info.</p>

			<p>You may use it also for a list of links:</p>

```
			<ul class="k-links-list">
```

				<li><a href="#">Link example</a></li>

				<li><a href="#">Another link example</a></li>

```
			</ul>
```
```
		</div>
```
```
	</div>
```
```
</body>
```
```
</html>
```

Top

KAWWA Markup Pattern Library

Blocks

Accordion

Accordion Block

Accordion Block

Accordion Block

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce