EVOLUTION-NINJA

Edit File: jquery.yeoTabs.js

(function($){
	$.fn.yeoTabs = function(){

var init = function(elem){
			var $container = $(elem),
				$panelContainer = $container.children('.panels');

var $tabContainer = initMarkup($container, $panelContainer);
			bind($tabContainer, $panelContainer);
		};

var initMarkup = function($container, $panelContainer) {
	        var $tabContainer = $('<ul></ul>');

$panelContainer.children('div').each(function(index){
	        	var $this = $(this),
	        		ariaSelectedValue = index === 0 ? 'true' : 'false',
	        		tabLabel = $(this).children('label:first').text(),
	        		newTab = $('<li>'+tabLabel+'</li>').attr({'id': 'tab' + index, 'role': 'tab', 'aria-controls': 'panel' + index, 'aria-selected': ariaSelectedValue});
	        	
	        	$tabContainer.append(newTab);

if(index === 0) {
	                $this.attr('aria-hidden', 'false');
	            } else {
	                $this.attr('aria-hidden', 'true');
	            }

$this.before('<h2 aria-controls="panel' + index + '" aria-selected="false" class="tab" role="tab">' + tabLabel + '</h2>');
	            $this.addClass('panel').attr({'id': 'panel' + index, 'role': 'tabpanel', 'aria-labelledby': 'tab' + index});
	        });

$tabContainer.attr('role', 'tabList').attr('data-page-width', window.innerWidth);
	        $container.prepend($tabContainer);

return $tabContainer;
	    };

var bind = function($tabContainer, $panelContainer) {
	        //tabs
	        $tabContainer.children('li[role="tab"]').on('click', function(e) {
	            var $this = $(this),
	                $tabsContainer = $this.parent(),
	                tabPanelId = $this.attr('aria-controls'),
	                $panelTarget = $('#' + tabPanelId);

$panelContainer.children().removeAttr('style');

//set the tab 
	            $this.siblings('li').attr('aria-selected', 'false');
	            $this.attr('aria-selected', 'true');

//set the panel
	            $panelContainer.children('div[role="tabpanel"]').attr('aria-hidden', 'true');
	            $panelTarget.attr('aria-hidden', 'false');
	        });

//accordian
	        $panelContainer.children('h2[role="tab"]').on('click', function(e) {
	            var $this = $(this),
	                $panelContainer = $this.parent(),
	                tabPanelId = $this.attr('aria-controls'),
	                $panelTarget = $('#' + tabPanelId),
	                $tabTarget = $tabContainer.find('li[aria-controls="'+tabPanelId+'"]');

//set the panel
	            $panelContainer.find('div[aria-hidden="false"]').stop(true, true).slideUp('400', function(){
	                $panelContainer.children('div[role="tabpanel"]').attr('aria-hidden', 'true');
	                if($panelTarget.attr('aria-hidden') === 'false') {
	                	$panelTarget.attr('aria-hidden', 'false');
	                }
	            });

//set the tab (even though hidden)
	            $tabTarget.siblings('li').attr('aria-selected', 'false');
	            $tabTarget.attr('aria-selected', 'true');

//check to see if active element has been clicked
	            if($panelTarget.attr('aria-hidden') !== 'false') {
		            $panelTarget.stop(true, true).slideDown('400', function(){
		                $panelTarget.attr('aria-hidden', 'false');
		            });
	            } 
	        });

//if user is resizing the window and has all tabs closed in accordian, no panel will be open when full size comes back
			window.onresize = function(e) {
				if(window.innerWidth < 640 && $tabContainer.data('page-width') > 640) {
				} else if(window.innerWidth > 640 && $tabContainer.data('page-width') <= 640) {
					//check to make sure at least one panel is displayed
					if($panelContainer.children('div:visible').length < 1) {
						var panelTarget = $tabContainer.find('li[aria-selected="true"]').attr('aria-controls');
						$('#'+panelTarget).show();
					}
				}
				$tabContainer.data('page-width', window.innerWidth);
			};
	    };

this.each(function(){
			init(this);
		});
	};
}(jQuery));