I have developed the following jQuery code.
I have some questions:
$.fn.function
<ul class="linkContainer">
<li><a href="#" class="link" data-link="one">one</a></li>
<li><a href="#" class="link" data-link="two">two</a></li>
<div class="moreDetailsSection" data-section="one">
chakabakas
</div>
<div class="moreDetailsSection" data-section="two">
sasjakjk
</div>
(function ($) {
var animation = {
options: {
linkContainer : $('.linkContainer'),
section: $('.section'),
link : $('.link'),
mainEffect: 'slideToggle',
mainEffectSpeed: 300
},
init: function (options) {
var link = this.options.link;
$.extend(this.options, options);
link.on('click', this.changeWindow );
},
changeWindow: function () {
var linkId = $(this).data('link'),
options = animation.options,
sectionContainer = animation.options.section,
elements = sectionContainer,
element = elements.filter('[data-section="'+ linkId +'"]');
element[options.mainEffect](options.mainEffectSpeed);
}
}
animation.init();
})(jQuery);
You already have a working plugin, just have jquery interact with it.
$.animation = animation;
$.fn.animation = function (options) {
return this.each(function () {
$.animation.init($.extend({
link: this
}, options));
});
};
$.animation
is just a reference to the original plugin, and $.fn.animation
is a wrapper so that you can call $(".link").animation({options here})