jquery - jquery working in jsfiddle, but not on site

Question

I know people have submitted similar questions, but I've been through the answers as well and not seen a solution that works. I wrote a script that sorts my list of portfolio items in jsfiddle. It looks something like this:

 $(document).ready(function(){

    $( ".music-button" ).click(function() {
      $('.project-thumb-inside').not('.music').addClass('hidden').removeClass('visible');
      $('.music').addClass('visible').removeClass('hidden');
    });

 )};

On jsfiddle, the script works, but when I plug it into my site's footer, it does not do a thing. Would anyone know why?

I've put everything (stylesheet and all) into jsfiddle, and my site works: http://jsfiddle.net/LbgPF/2/

But when I go to my actual website, my script does not work: http://www.rileydra.com/00_dra/work/branding-and-identity/

I've spent quite a bit of time on this but still think the solution is something simple that I'm overlooking.

Edit: changed the script excerpt to better show the error of my ways.

Answer 1

You have used noConflict in your page, so $ does not point to jQuery. so instead of using $ in your script you need to use jQuery.

Change the script in sort.js to

//here the shortcut version of dom ready is used, also the jQuery instance is passed as a parameter to the callback function which we assigns to a local parameter $, so we can use $ to refer jQuery inside the callback method
jQuery(function($){

    $( ".technology-button" ).click(function() {
        $('.project-thumb-inside').not('.technology').addClass('hidden').removeClass('visible');
        $('.technology').addClass('visible').removeClass('hidden');
    });

    $( ".retail-button" ).click(function() {
        $('.project-thumb-inside').not('.retail').addClass('hidden').removeClass('visible');
        $('.retail').addClass('visible').removeClass('hidden');
    });

    $( ".real-estate" ).click(function() {
        $('.project-thumb-inside').not('.real-estate').addClass('hidden').removeClass('visible');
        $('.real-estate').addClass('visible').removeClass('hidden');
    });

    $( ".publishing-button" ).click(function() {
        $('.project-thumb-inside').not('.publishing').addClass('hidden').removeClass('visible');
        $('.food').addClass('visible').removeClass('hidden');
    });

    $( ".music-button" ).click(function() {
        $('.project-thumb-inside').not('.music').addClass('hidden').removeClass('visible');
        $('.music').addClass('visible').removeClass('hidden');
    });

    $( ".churches-button" ).click(function() {
        $('.project-thumb-inside').not('.churches').addClass('hidden').removeClass('visible');
        $('.churches').addClass('visible').removeClass('hidden');
    });

    $( ".health-button" ).click(function() {
        $('.project-thumb-inside').not('.health').addClass('hidden').removeClass('visible');
        $('.health').addClass('visible').removeClass('hidden');
    });

    $( ".food-button" ).click(function() {
        $('.project-thumb-inside').not('.food').addClass('hidden').removeClass('visible');
        $('.food').addClass('visible').removeClass('hidden');
    });

    $( ".finance-button" ).click(function() {
        $('.project-thumb-inside').not('.finance').addClass('hidden').removeClass('visible');
        $('.finance').addClass('visible').removeClass('hidden');
    });

    $( ".entertainment-button" ).click(function() {
        $('.project-thumb-inside').not('.entertainment').addClass('hidden').removeClass('visible');
        $('.entertainment').addClass('visible').removeClass('hidden');
    });

    $( ".education-button" ).click(function() {
        $('.project-thumb-inside').not('.education').addClass('hidden').removeClass('visible');
        $('.education').addClass('visible').removeClass('hidden');
    });

    $( ".all-button" ).click(function() {
        $('.project-thumb-inside').addClass('visible');
        $('.project-thumb-inside').removeClass('hidden');
    });

});