(function($) {
	$.fn.slider = function(settings) {

		var config = {
			clickElement: '> h2',
			slideElement: '> div',
			activeClass: 'active',

			width: false, // setting the width is important if your slider is not visible on page load (as in tabs)
			accordion: false // set to true to have only one opened at once
		};
 		if (settings) $.extend(config, settings);

		var container = this;

		// add class to container so we can style it only when js is activated
		container.addClass('js');

		container.each(function() {

			// hide all slideElements except those following active clickElements
			$(config.clickElement, this).not('.' + config.activeClass).each(function() {
				var slideElement = $(this).next();

				// THIS IS IMPORTANT!
				// Prevents slide effect jumping
				if (config.width) {
					slideElement.width(config.width);
				} else {
					slideElement.width(slideElement.width());
				}

				slideElement.hide();
			});

			// toggle content
			$(config.clickElement, this).click(function() {
				var clickElement = $(this);
				var slideElement = clickElement.next();

				// accordion mode
				if (config.accordion) {
					if (!clickElement.hasClass(config.activeClass)) {
						$(config.slideElement, container).slideUp();
						$(config.clickElement, container).removeClass(config.activeClass);
						slideElement.slideToggle('normal');
						clickElement.toggleClass(config.activeClass);
					}
				// slide mode
				} else {
					if (clickElement.hasClass(config.activeClass)) {
						slideElement.slideToggle('normal', function() {
							clickElement.toggleClass(config.activeClass);
						});
					} else {
						slideElement.slideToggle('normal');
						clickElement.toggleClass(config.activeClass);
					}
				}
			});
		});

		return container;
	};
})(jQuery);


