Revision: 47674
Updated Code
at June 13, 2011 18:52 by neilp123
Updated Code
/*
* jQuery Plugin name : Accordion
* descriptions : A simple jQuery Accordion plugin
* created by : Neil Pearce on 13/6/2011
* URL : http://www.neilrpearce.co.uk
*
* 1. The defaults variable is an object that acts like an array with aBtn, aContent and active as the
* keys and each hold a value that we will use as a CSS class. We then merge 'options' with 'defaults'
* and add them to the jQuery object for later use using the $.extend() method.
*
* 2. This doesn't need to be here and is only used to open up a panel by default.
* To keep things simple i have declared a variable 'o' and stored the options within. Then we hide all panels with
* the class of 'content' and we then loop over the main buttons(aBtn) using the each() method to see which is
* active(has a class of open)and then open up it's siblings(in this case a table) using the slideDown() method.
*
* 3. Using the variable 'obj' we check to see what button(aBtn) has been clicked and see if it has a class of 'open'. If
* it has, we set it to false and close it up, but if it doesn't we add the class and open it up. Simple hey!
*
*
*/
/* Usage - also see bottom of snippet
$("#accordion").accordion();
*/
(function($){
// #1
$.fn.accordion = function(options) {
// set some defaults
var defaults = {
aBtn: 'btn',
aContent: 'content',
active: 'open'
},
// merge together
options = $.extend({}, defaults, options);
// #2
var o = options;
$(function(){
// hide all the content panels from the off
$('.' +o.aContent).hide();
// traverse the dom(loop over) to see which is active(has a class of open)
// and then open up it's siblings(I.E table)
$('.' +o.aBtn).each(function(){
if($(this).hasClass(o.active)){
$(this).siblings().slideDown();
}
});
});
// #3
// check for click events
$('.'+o.aBtn).click(function() {
var obj = $(this);
// check see if we have click the currently active tab
// as we won't be able to check after closing the tabs!
var slide = true;
if(obj.hasClass('open'))
{
slide = false;
}
// close all the current elements
$('.'+o.aContent).slideUp().removeClass(o.active);
$('.'+o.aBtn).removeClass(o.active);
// check if we should still slide
if(slide)
{
// make the clicked button active and open
obj.addClass(o.active);
obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
}
// #4
return false;
});
return this;
};
})(jQuery);
/******* THE HTML ***************/
<ul class="accordion">
<li><a href="#" class="btn open">fixtures</a>
<div class="content">
<h2>Tuesday 7th June 2011</h2>
<table border="0">
<tbody>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">West Ham United</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Sunderland</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Stoke City</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Wigan Athletic</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Newcastle United</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">West Bromwich Albion</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Everton</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Chelsea</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Manchester United</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Blackpool</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Fulham</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Arsenal</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Aston Villa</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Liverpool</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Tottenham Hotspur</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Birmingham City</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Wolverhampton Wanderers</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Blackburn Rovers</td>
</tr>
<tr>
<td class="fixt-time">15:00</td>
<td class="fixt-name fixt-left">Bolton Wanderers</td>
<td class="fixt-vs">vs</td>
<td class="fixt-name">Manchester City</td>
</tr>
</tbody>
</table>
</div>
</li>
Revision: 47673
Updated Code
at June 13, 2011 18:41 by neilp123
Updated Code
/*
* jQuery Plugin name : Accordion
* descriptions : A simple jQuery Accordion plugin
* created by : Neil Pearce on 13/6/2011
* URL : http://www.neilrpearce.co.uk
*
* 1. The defaults variable is an object that acts like an array with aBtn, aContent and active as the
* keys and each hold a value that we will use as a CSS class. We then merge 'options' with 'defaults'
* and add them to the jQuery object for later use using the $.extend() method.
*
* 2. This doesn't need to be here and is only used to open up a panel by default.
* To keep things simple i have declared a variable 'o' and stored the options within. Then we hide all panels with
* the class of 'content' and we then loop over the main buttons(aBtn) using the each() method to see which is
* active(has a class of open)and then open up it's siblings(in this case a table) using the slideDown() method.
*
* 3. Using the variable 'obj' we check to see what button(aBtn) has been clicked and see if it has a class of 'open'. If
* it has, we set it to false and close it up, but if it doesn't we add the class and open it up. Simple hey!
*
*
*/
/* Usage
$("#accordion").accordion();
*/
(function($){
// #1
$.fn.accordion = function(options) {
// set some defaults
var defaults = {
aBtn: 'btn',
aContent: 'content',
active: 'open'
},
// merge together
options = $.extend({}, defaults, options);
// #2
var o = options;
$(function(){
// hide all the content panels from the off
$('.' +o.aContent).hide();
// traverse the dom(loop over) to see which is active(has a class of open)
// and then open up it's siblings(I.E table)
$('.' +o.aBtn).each(function(){
if($(this).hasClass(o.active)){
$(this).siblings().slideDown();
}
});
});
// #3
// check for click events
$('.'+o.aBtn).click(function() {
var obj = $(this);
// check see if we have click the currently active tab
// as we won't be able to check after closing the tabs!
var slide = true;
if(obj.hasClass('open'))
{
slide = false;
}
// close all the current elements
$('.'+o.aContent).slideUp().removeClass(o.active);
$('.'+o.aBtn).removeClass(o.active);
// check if we should still slide
if(slide)
{
// make the clicked button active and open
obj.addClass(o.active);
obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
}
// #4
return false;
});
return this;
};
})(jQuery);
Revision: 47672
Updated Code
at June 13, 2011 18:39 by neilp123
Updated Code
/*
* jQuery Plugin name : Accordion
* descriptions : A simple jQuery Accordion plugin
* created by : Neil Pearce on 13/6/2011
* URL : http://www.neilrpearce.co.uk
*
* 1. The defaults variable is an object that acts like an array with aBtn, aContent and active as the
* keys and each hold a value that we will use as a CSS class. We then merge 'options' with 'defaults'
* and add them to the jQuery object for later use using the $.extend() method.
*
* 2. This doesn't need to be here and is only used to open up a panel by default.
* To keep things simple i have declared a variable 'o' and stored the options within. Then we hide all panels with
* the class of 'content' and we then loop over the main buttons(aBtn) using the each() method to see which is
* active(has a class of open)and then open up it's siblings(in this case a table) using the slideDown() method.
*
* 3. Using the variable 'obj' we check to see what button(aBtn) has been clicked and see if it has a class of 'open'. If
* it has, we set it to false and close it up, but if it doesn't we add the class and open it up. Simple hey!
*
*
*/
(function($){
// #1
$.fn.accordion = function(options) {
// set some defaults
var defaults = {
aBtn: 'btn',
aContent: 'content',
active: 'open'
},
// merge together
options = $.extend({}, defaults, options);
// #2
var o = options;
$(function(){
// hide all the content panels from the off
$('.' +o.aContent).hide();
// traverse the dom(loop over) to see which is active(has a class of open)
// and then open up it's siblings(I.E table)
$('.' +o.aBtn).each(function(){
if($(this).hasClass(o.active)){
$(this).siblings().slideDown();
}
});
});
// #3
// check for click events
$('.'+o.aBtn).click(function() {
var obj = $(this);
// check see if we have click the currently active tab
// as we won't be able to check after closing the tabs!
var slide = true;
if(obj.hasClass('open'))
{
slide = false;
}
// close all the current elements
$('.'+o.aContent).slideUp().removeClass(o.active);
$('.'+o.aBtn).removeClass(o.active);
// check if we should still slide
if(slide)
{
// make the clicked button active and open
obj.addClass(o.active);
obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
}
// #4
return false;
});
return this;
};
})(jQuery);
Revision: 47671
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at June 13, 2011 18:38 by neilp123
Initial Code
(function($){
// #1
$.fn.accordion = function(options) {
// set some defaults
var defaults = {
aBtn: 'btn',
aContent: 'content',
active: 'open'
},
// merge together
options = $.extend({}, defaults, options);
// #2
var o = options;
$(function(){
// hide all the content panels from the off
$('.' +o.aContent).hide();
// traverse the dom(loop over) to see which is active(has a class of open)
// and then open up it's siblings(I.E table)
$('.' +o.aBtn).each(function(){
if($(this).hasClass(o.active)){
$(this).siblings().slideDown();
}
});
});
// #3
// check for click events
$('.'+o.aBtn).click(function() {
var obj = $(this);
// check see if we have click the currently active tab
// as we won't be able to check after closing the tabs!
var slide = true;
if(obj.hasClass('open'))
{
slide = false;
}
// close all the current elements
$('.'+o.aContent).slideUp().removeClass(o.active);
$('.'+o.aBtn).removeClass(o.active);
// check if we should still slide
if(slide)
{
// make the clicked button active and open
obj.addClass(o.active);
obj.siblings('.'+o.aContent).addClass(o.active).slideDown();
}
// #4
return false;
});
return this;
};
})(jQuery);
Initial URL
Initial Description
This is a simple accordion plugin that i wrote. Hope it comes in handy.
Initial Title
jQuery Accordion plugin
Initial Tags
plugin, jquery
Initial Language
jQuery