$(document).ready(function(){
 	// Hide all tabs

	$('.tabs div.tab').hide();
	
	// Show default tab
	$('.tabs div.tab:first').hide();
	
	// Set active default tab class
	$('.tabs .tabLink:first').addClass('active');
	
	// Class added for formatting items when JS enabled
	$('.tabs').addClass('jsOn');
	
	// Watch for click
	$('.tabLink').click(function(){
		// Show default tab
		$('.tabs div.tab:first').show();

		// Remove active class from all links 
		$('.tabs .tabLink').removeClass('active');
		
		// Add active class to current link
		$(this).addClass('active');
		
		// Traverse clicked link, find parent, and hide all child tabs within that tabs div
		//$(this).parents('.tabs').children("div.tab").hide();
		$('.tabs div.tab').hide(); // Use this option for global hiding of child tabs
		
		// Assign selected href tab reference to variable
		var currentTab = $(this).attr('href');
		
		// Show selected tab
		$(currentTab).show();
		return false;
	});
	
	// Close the opened Div
	$('.tabs div.tab .tabLink').click(function(){
		// Show default tab
		$('.tabs div.tab').hide();
		return false;
	});

	//function to toggle the CSS class for the selected rows on click event...
    function toggleRow(el){
        var cssClassName = $(el).attr('class')
        if (cssClassName === 'title') {
            $(el).addClass('selected');
            $(el).removeClass('title');
        }
        else {
            $(el).addClass('title');
            $(el).removeClass('selected');
        }
    }

	// setup click eventhandler for every div with a class of 'title'
    $('.title').click(function(event){
        $(this).next().slideToggle('slow')
        toggleRow($(this))
    })
 
});