[ KAWWA PORTAL ] Components : Collapsible Panel

Blocks

Collapsible Panel

Class name: (k-panel)
Version: 1.1
jQuery Interactive feature
Tapestry Integration

You may use collapsible panels whenever you need to group content of the same nature but when this content, once hidden, do not interfere to the overall understanding of the general page content. Instead, it allows the user to get a better view of another portion of the page.

While with accordions the user is able to open only one panel at a time (opening a closed panel closes the already opened one), with collapsible panels the user may open as many panels she wants (opening a closed panel won't close an already opened one).

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

This is the sliding pannel title

Your pannel content goes here...

You can add any kind of content inside it.

HTML5 Plain Code

COPY

```
<section class="k-panel">
```

	<h4 class="control"><a href="#" title="Click to fold/unfold">This is the sliding pannel title</a></h4>

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

		<p>Your pannel content goes here...</p>

		<p>You can add any kind of content inside it.</p>

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

Note that the panel control may be defined by any level of title (h2, h3, h4, etc.), depending where in you page hierarchy it appears.

CSS Code

COPY

```
.k-panel {
```
```
  clear: both;
```
```
  overflow: auto;
```
```
  margin-bottom: 2em;
```
```
  border: 1px solid #CCC;
```
```
}
```
```
.k-panel .control {
```
```
  font-size: 1em;
```
```
  text-transform: uppercase;
```
```
  color: white;
```
```
  background: transparent;
```
```
  padding: 0;
```
```
  margin: 0;
```
```
}
```

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

```
  display: block;
```
```
  font-size: 100%;
```
```
  text-decoration: none;
```
```
  text-align: left;
```
```
  color: white;
```

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

```
  padding: 0.5em 2em 0.5em 0.7em;
```
```
  border: none;
```
```
  cursor: pointer;
```
```
}
```

.k-panel .control a:hover, .k-panel .control a:focus {

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

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

```
  color: white;
```

  background: black url(../img/k-theme0/fold.svg) right 0.45em no-repeat;

```
}
```

.k-panel .control a.active:hover, .k-panel .control a.active:focus {

```
  color: white;
```
```
  background-color: #a40800;
```
```
}
```
```
.k-panel > .content {
```
```
  padding: 1em 20px;
```
```
}
```
```
fieldset.k-panel {
```
```
  padding: 0;
```
```
}
```
```
fieldset.k-panel legend.control {
```
```
  width: 100%;
```
```
}
```

fieldset.k-panel legend.control::after {

```
  content: "";
```
```
}
```
```
p + .k-panel {
```
```
  margin-top: 1em;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if($.fn.collapsiblePanel) {
```
```
			$( '.k-panel' ).collapsiblePanel();
```
```
		}
```
```
	});
```
```
})(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

CollapsiblePanel parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
options	false	JSONObject	prop		The JSON option for the jQuery widget.
header	false	String	message		The String for the Header part of the Panel.
autoOpen	false	Boolean	prop		The panel should be opened or closed by default ?
title	false	String	message	Click to fold/Unfold	The title attribute for "a" tag of the Header.

The Template

COPY

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

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

 	<div t:type="kawwa2/collapsiblePanel" t:header="literal:header"

 	t:title="literal:title" t:autoOpen="literal:true">

```
 		content
```
```
 	</div>
```
```
</html>
```

Top

KAWWA Markup Pattern Library

Blocks

Collapsible Panel

This is the sliding pannel title

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