This is the sliding pannel title
Your pannel content goes here...
You can add any kind of content inside it.
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).
Your pannel content goes here...
You can add any kind of content inside it.
<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.
.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;
}
(function($){
'use strict';
$(document).ready(function(){
if($.fn.collapsiblePanel) {
$( '.k-panel' ).collapsiblePanel();
}
});
})(jQuery);
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:
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. |
<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>