jQuery accordion test
Test for the new accordion plugin
by jamessouth
HTML
<div class="acc">
<div class="acc-head" data-plugin="accordion" data-options='{"target":"#body1"}' >
<p>
Click to trigger accordion shift
</p>
</div>
<div id="body1" class="acc-body">
<p>
kjbnjkn jknkjfnvjkn fdjknfdpospds dkndv fd;olkiejwn folijdifjflk.
</p>
</div>
</div>
CSS
.acc
{
width:350px;
border: 1px solid #ccc;
font-family:arial;
}
.acc-head
{
border-bottom: 1px solid #ccc;
font-size:16px;
padding:7px;
}
.acc-body
{
font-size:14px;
padding:7px;
}
JavaScript
/*global jQuery*/
(function ($) {
"use strict";
// The Accordion object that contains our methods.
var Accordion = function (element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.accordion.defaults, options);
if (this.options.parent) {
this.$parent = $(this.options.parent);
}
console.log("options in Accordion");
console.log(options);
// Check to see if the plugin is set to toggle and trigger the correct internal method if so.
if (this.options.toggle) {
this.toggle();
}
},
// Referenced here to save bytes on minification.
accordionDataAttribute = "accordion";
// Assign public methods via the Accordion prototype.
Accordion.prototype = {
constructor: Accordion,
dimension: function () {
// return the dimension option.
return this.options.dimension;
},
show: function () {
var dimension = this.dimension();
console.log("showing " + dimension);
},
hide: function () {
var dimension = this.dimension();
console.log("showing " + dimension);
},
toggle: function () {
// Run the correct command based on the presence of the class 'xpnd'.
this[this.$element.hasClass("xpnd") ? "hide" : "show"]();
}
};
/* Plugin definition */
$.fn.accordion = function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data(accordionDataAttribute),
opts = typeof options === "object" ? options : null;
if (!data) {
// Check the data and reassign if not present.
$this.data(accordionDataAttribute, (data = new Accordion(this, opts)));
console.log("logging data");
console.log(data);
}
...