KAWWA Markup Pattern Library


Blocks

Accordion Component Information

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

Add to list

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

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
  1. <div class="k-accordion">
  2. 	<h3 class="control"><a href="#">Accordion Block</a></h3>
  3. 	<div class="content">
  4. 		<p>This is an alternative to sliding panels or to info blocks.</p>
  5. 		<p>Accordions go by groups of blocks, and only one block is opened at a time.</p>
  6. 	</div>
  7. 	<h3 class="control"><a href="#">Accordion Block</a></h3>
  8. 	<div class="content">
  9. 		<p>This block may be used to all transversal info.</p>
  10. 		<p>You may use it also for a list of links:</p>
  11. 		<ul class="k-links-list">
  12. 			<li><a href="#">Link example</a></li>
  13. 			<li><a href="#">Another link example</a></li>
  14. 		</ul>
  15. 	</div>
  16. 	<h3 class="control"><a href="#">Accordion Block</a></h3>
  17. 	<div class="content">
  18. 		<p>This block may be used to all transversal info.</p>
  19. 		<p>You may use it also for a list of links:</p>
  20. 		<ul class="k-links-list">
  21. 			<li><a href="#">Link example</a></li>
  22. 			<li><a href="#">Another link example</a></li>
  23. 		</ul>
  24. 	</div>
  25. </div>
  26. 							

CSS Code

COPY
  1. .k-accordion {
  2.   clear: both;
  3.   margin-bottom: 2em;
  4.   border-bottom: 4px solid black;
  5. }
  6. .k-accordion .control {
  7.   font-size: 1em;
  8.   text-transform: uppercase;
  9.   padding: 1px 0;
  10.   margin: 0;
  11. }
  12. .k-accordion .control a, .k-accordion .control a:link, .k-accordion .control a:visited {
  13.   display: block;
  14.   text-decoration: none;
  15.   color: white;
  16.   background: #999 url(../img/k-theme0/unfold.svg) right 0.45em no-repeat;
  17.   padding: 0.5em 28px 0.5em 0.7em;
  18.   cursor: pointer;
  19. }
  20. .k-accordion .control a:focus, .k-accordion .control a:focus {
  21.   color: white;
  22.   background-color: #a40800;
  23. }
  24. .k-accordion .control a.active, .k-accordion .control a.active:link, .k-accordion .control a.active:visited {
  25.   color: white;
  26.   background: black;
  27. }
  28. .k-accordion .control a.active:focus, .k-accordion .control a.active:focus {
  29.   color: white;
  30.   background-color: #a40800;
  31. }
  32. .k-accordion div.content {
  33.   margin: 1em;
  34. }
  35. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if(jQuery.fn.kAccordion) {
  6. 			jQuery( ".k-accordion" ).kAccordion();
  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

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  4. 	xmlns:p="tapestry:parameter">
  5. 
                                
  6. <body>
  7. 	<div t:type="any"  t:mixins="kawwa2/accordion"  class="k-accordion">
  8. 		
  9. 		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>
  10. 		<div class="content">
  11. 			<p>This is an alternative to sliding panels or to info blocks.</p>
  12. 			<p>Accordions go by groups of blocks, and only one block is opened at a time.</p>
  13. 		</div>
  14. 		
  15. 		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>
  16. 		<div class="content">
  17. 			<p>This block may be used to all transversal info.</p>
  18. 			<p>You may use it also for a list of links:</p>
  19. 			<ul class="k-links-list">
  20. 				<li><a href="#">Link example</a></li>
  21. 				<li><a href="#">Another link example</a></li>
  22. 			</ul>
  23. 		</div>
  24. 		
  25. 		<h3 class="control" title="Click to fold/unfold block">Accordion Block</h3>
  26. 		<div class="content">
  27. 			<p>This block may be used to all transversal info.</p>
  28. 			<p>You may use it also for a list of links:</p>
  29. 			<ul class="k-links-list">
  30. 				<li><a href="#">Link example</a></li>
  31. 				<li><a href="#">Another link example</a></li>
  32. 			</ul>
  33. 		</div>
  34. 	</div>
  35. </body>
  36. </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