Accordion A

Documentation

Thank you for choosing Accordion A.

Getting started

  1. Unzip your download, accordion-a-1.0.zip.
  2. Place the contents of the accordion-a-1.0 folder in your local or remote project folder.
  3. Follow the steps under integration.

Included

Name Path
jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
jQuery UI - widget factory js/jquery.ui.widget.min.js
jQuery plugin js/jquery.accordion-a-1.0.js
jQuery plugin, minified js/jquery.accordion-a-1.0.min.js
Base stylesheet css/accordion-a.css
Minimal theme css/accordion-a.minimal.css
Empty theme css/accordion-a.empty.css
Demo demo/accordion-a.html
Dark demo demo/dark.html
Documentation documentaton/documentation.html

Integration

Open the HTML document you want to integrate Accordion A in.

Include the base stylesheet

<link rel="stylesheet" href="css/accordion-a.css" />

Paste the above code within the head tags.

Include a theme

<link rel="stylesheet" href="css/accordion-a.minimal.css" />

Paste the above code within the head tags.

Include jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Paste the above code at the bottom, before the body closing tag.

Include jQuery UI - widget factory

<script src="js/jquery.ui.widget.min.js"></script>

Paste the above code at the bottom, before the body closing tag.

Include the jQuery plugin

<script src="js/jquery.accordion-a-1.0.min.js"></script>

Paste the above code at the bottom, before the body closing tag.

API

Initialization

$('selector').accordionA()

Replace selector with the jQuery selector pointing to the HTML Accordion A element(s).

Methods

destroy

.accordionA('destroy')

Remove the accordionA functionality completely. This will return the element back to its pre-init state.

option

.accordionA('option', optionName, [value])

Get or set any accordionA option. If no value is specified, will act as a getter.

option

.accordionA('option', options)

Set multiple accordionA options at once by providing an options object.

toggle

.accordionA('toggle', 'selector', [expand])
  • 'selector' a jQuery selector, a jQuery object, or a DOM element, pointing to the section to be toggled.
  • expand a boolean, indicating if the section should expand (true) or collapse (false).

    • Options

    .accordionA({
	section: '> section',
	header: '> header',
	content: '> .content',
})

    section

    A string with a jQuery selector pointing to the section element.

    header

    A string with a jQuery selector pointing to the section's header element.

    content

    A string with a jQuery selector pointing to the section's content grouping element.

    Events

    create

    This event is triggered when accordionA is created.

    $('selector').accordionA({
	create: function(event) {

	}
});

    $('selector').bind('accordionacreate', function(event) {

});

    toggle

    This event is triggered when a section is toggled.

    $('selector').accordionA({
	toggle: function(event, accordiona) {

	}
});

    $('selector').bind('accordionatoggle', function(event, accordiona) {

});

    Theming

    Classname overview

    Classname Description Scope
    content The content inside a section. .accordion-a section *
    no-outline Indicates that there should be no outline. .accordion-a header
    no-transition Indicates that there should be no transition. E.g applied during initialization. .accordion-a header

    Support

    Contact

    If you're experiencing any problems or do have a question, you may contact support via one of the following ways: