I was refactoring my code (I think refactoring is the right word), so I used a function so I wouldn't repeat myself so much. But I think the function messed up my $(this).
The part of my code thats commented out works
I think my problem is in the function at disabled = this;
var active = '.teachers';var disabled = '.teacher-link';var width = $('.teachers .staff-outer-container').children().size() * 180;$('.staff-outer-container').css('width', width +'px');/* BELOW IS COMMENTED OUT$('.teacher-link').click(function() { if (active != '.teachers') { $(active).hide(); active = '.teachers'; $(active).show(); width = $('.teachers .staff-outer-container').children().size() * 180; $('.teachers .staff-outer-container').css('width', width +'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Teachers'); }});$('.admin-link').click(function() { if (active != '.administrators') { $(active).hide(); active = '.administrators'; $(active).show(); width = $('.administrators .staff-outer-container').children().size() * 180; $('.administrators .staff-outer-container').css('width', width +'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Administrators'); }});$('.support-link').click(function() { if (active != '.support') { $(active).hide(); active = '.support'; $(active).show(); width = $('.support .staff-outer-container').children().size() * 180; $('.support .staff-outer-container').css('width', width +'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Support Staff'); }});END COMMENT */$('.teacher-link').click(function(){handle_click('.teachers','Teachers');});$('.admin-link').click(function(){handle_click('.administrators','Administrators');});$('.support-link').click(function(){handle_click('.support','Support Staff');});function handle_click(target, target_text) { if (active != target) { $(active).hide(); active = target; $(active).show(); width = $(target +' .staff-outer-container').children().size() * 180; $(target +' .staff-outer-container').css('width', width +'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text(target_text); }}
As you can see from my fiddle, the links dont turn grey after clicking. But if I remove the function and uncomment the script, they work again.