KAWWA Markup Pattern Library


Blocks

Collapsible Panel Component Information

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

Add to list

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).

This is the sliding pannel title

Your pannel content goes here...

You can add any kind of content inside it.

HTML5 Plain Code

COPY
  1. <section class="k-panel">
  2. 	<h4 class="control"><a href="#" title="Click to fold/unfold">This is the sliding pannel title</a></h4>
  3. 	<div class="content">
  4. 		<p>Your pannel content goes here...</p>
  5. 		<p>You can add any kind of content inside it.</p>
  6. 	</div>
  7. </section>
  8. 
                                
  9. 							

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
  1. .k-panel {
  2.   clear: both;
  3.   overflow: auto;
  4.   margin-bottom: 2em;
  5.   border: 1px solid #CCC;
  6. }
  7. .k-panel .control {
  8.   font-size: 1em;
  9.   text-transform: uppercase;
  10.   color: white;
  11.   background: transparent;
  12.   padding: 0;
  13.   margin: 0;
  14. }
  15. .k-panel .control a, .k-panel .control a:link, .k-panel .control a:visited {
  16.   display: block;
  17.   font-size: 100%;
  18.   text-decoration: none;
  19.   text-align: left;
  20.   color: white;
  21.   background: #999 url(../img/k-theme0/unfold.svg) right 0.45em no-repeat;
  22.   padding: 0.5em 2em 0.5em 0.7em;
  23.   border: none;
  24.   cursor: pointer;
  25. }
  26. .k-panel .control a:hover, .k-panel .control a:focus {
  27.   color: white;
  28.   background-color: #a40800;
  29. }
  30. .k-panel .control a.active, .k-panel .control a.active:link, .k-panel .control a.active:visited {
  31.   color: white;
  32.   background: black url(../img/k-theme0/fold.svg) right 0.45em no-repeat;
  33. }
  34. .k-panel .control a.active:hover, .k-panel .control a.active:focus {
  35.   color: white;
  36.   background-color: #a40800;
  37. }
  38. .k-panel > .content {
  39.   padding: 1em 20px;
  40. }
  41. 
                                
  42. fieldset.k-panel {
  43.   padding: 0;
  44. }
  45. fieldset.k-panel legend.control {
  46.   width: 100%;
  47. }
  48. fieldset.k-panel legend.control::after {
  49.   content: "";
  50. }
  51. 
                                
  52. p + .k-panel {
  53.   margin-top: 1em;
  54. }
  55. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.collapsiblePanel) {
  6. 			$( '.k-panel' ).collapsiblePanel();
  7. 		}
  8. 	});
  9. })(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
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3.  	
  4.  	<div t:type="kawwa2/collapsiblePanel" t:header="literal:header" 
  5.  	t:title="literal:title" t:autoOpen="literal:true">
  6.  		content
  7.  	</div>
  8. 
                                
  9. </html>

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce