jQuery HideShow plugin
by amindunited
HTML
<!-- SOF Accordian Example -->
<h1>Accordian Example</h1>
<div class="accordianWrap">
<ul class="">
<li>Group 01 - Item 01</li>
<li>Group 01 - Item 02</li>
<li>Group 01 - Item 03</li>
<li>Group 01 - Item 04</li>
</ul>
<div class="trigger">▼</div>
</div>
<div class="accordianWrap">
<ul>
<li>Group 02 - Item 01</li>
<li>Group 02 - Item 02</li>
<li>Group 02 - Item 03</li>
<li>Group 02 - Item 04</li>
</ul>
<div class="trigger">▼</div>
</div>
<div class="accordianWrap">
<ul>
<li>Group 03 - Item 01</li>
<li>Group 03 - Item 02</li>
<li>Group 03 - Item 03</li>
<li>Group 03 - Item 04</li>
</ul>
<div class="trigger">▼</div>
</div>
<!-- EOF Accordian Example -->
CSS
.accordianWrap {
width: 300px;
}
.accordianWrap li {
padding-left:10px;
}
.trigger {
text-align:center;
}
JavaScript
(function( $ ) {
//currently the selector must be "*"
$.fn.deepest = function(selector){
if (typeof (selector) === 'undefined') { selector = "*" };
var targ = $(this);
while ( $(targ).children(selector).length ) {
targ = $(targ).children(selector);
}
return targ;
};
})( jQuery );
/* ------------- New Function ---------------------*/
(function( $ ){
var defaults = {
group : [],
contentSelector : '.collapse',
triggerSelector : '.trigger',
swapText : true,
openText : "▲",
closeText : "▼",
animationType : "blind",
hideOnInit :true,
hideOthers : true,
openClass : 'active',
closedClass : 'inactive'
}
var that;
var methods = {
init : function( options ){
that = this;
var allData = options;
allData.group = $(this);
$(this).data("betshopHideShow", allData);
$(this).each(function(i, elm){
$(elm).data("betshopHideShow", allData);
$(elm).find(allData.contentSelector).first().hide().addClass(allData.closedClass);
$(allData.triggerSelector, elm).html(allData.closedText);
})
methods.setListeners();
$(this).first().find(allData.triggerSelector).first().click().html(allData.openText);
return $(this);
},
setListeners : function(){
var settings = $(that).data('betshopHideShow');
$(settings.group).each(function (i, obj){
var settings = $(obj).data('betshopHideShow');
$(settings.triggerSelector, obj).click( methods.clickFn);
})
},
clickFn : function(e){
var data = $(that).data('betshopHideShow');
var settings = data;
var targ = $(e.target).closest(data.group);
...