Need help understanding what is going on in JQuery's noConflict() function

Question

I'm looking at the source code of this site and trying to figure out how a part of the Javascript works because I want to copy their expanding list functionary (eg "WHEN & WHERE CAN I TURN IN MY SOLD TICKETS & MONEY") into my site.

Lines 74-75 of the source code are

<script type="text/javascript" src="http://newjs.finalsite.com/150409/javascript/jQuery/jquery.min.js"></script>    
        <script type="text/javascript"> var $j = jQuery.noConflict(); </script>

which basically sets $j to whatever the function noConflict() returns.

Then, at the bottom of the code, they include the JS file http://newjs.finalsite.com/150409/javascript/pages/multicontent/multi_expand.js , which consists of the function

$j(function(){
    if(clickToClose){
        $j('.mcExpandingList').accordion({
            collapsible:'true',
            autoHeight: false
        });
        if(!mc_viewOption1){ $j('.mcExpandingList').accordion( 'option', 'active', false ); }
    }else{
        $j('.mcExpandingList').addClass('ui-accordion ui-widget ui-helper-reset ui-accordion-icons');

        $j('.mcExpandingList h4').addClass('ui-accordion-header ui-helper-reset ui-state-default ui-corner-all')
        .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
        .hover(function(){ $j(this).toggleClass('ui-state-hover') })
        .click(function(){
            $j(this).toggleClass('ui-state-active ui-corner-top ui-corner-all');
            $j(this).next().toggle('blind');
            $j(this).find('span').eq(0).toggleClass('ui-icon-triangle-1-s');
            return false;
        });

        $j('.contentElement').addClass('ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom').css('display','none');

        if (mc_viewOption1) {
            $j('.mcExpandingList h4').eq(0).toggleClass('ui-state-active ui-corner-top ui-corner-all');
            $j('.mcExpandingList h4').eq(0).next().show();
            $j('.mcExpandingList h4').eq(0).find('span').eq(0).addClass('ui-icon-triangle-1-s');
        };
    }
});

which, as I understand, is passing an anonymous function to the noConflict() object that was returned, which gives me the idea that $j is itself a function that does something. But I'm a little confused about how that attaches the above function as a click event to the expanding list links. Does anyone here understand it, and if so, can you explain it to me?

Answer 1

When jQuery is included it stores whatever value window.$ previously had.

When we call $j = jQuery.noConflict is returns the value of window.$ to its previous state. This is useful if you for example where using Prototype which also uses the shortcut $ .

It also returns a new alias so that we can refer to jQuery by $j .

If you wish to adapt multi_expand.js , with an custom aliased jQuery without jQuery.noConflict the simplest way is by using a anonymous function.

(function($j){
  // $j is jQuery
}(jQuery));

Or you can change the first row to read:

jQuery(function($j){ 
  // $j is jQuery

Which basically means; when the document is ready, run this function, with jQuery as $j.