Calling multiple jquery versions

I’ve recently been working on a very custom BuddyPress site that involves a lot of extra elements like jquery and there was a somewhat very annoying issue I came across when trying to add multiple jquery versions to one page and eventually found a workaround for it, so I thought I would share with anyone else who may or may not come across this problem.

Adding 2 Versions of Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script>
$(document).ready(function(){
console.log($().jquery); // This prints v1.4.2
console.log($j().jquery); // This prints v1.9.1
});
</script>

Adding the “j” after any $ of the function helps the jquery to read the difference.

Example:

$j(function () {
$j('.button-pro').on('click', function () {
var el = $('#cnt' + this.id.replace('btn', ''));
$j('#contentnew > div').not(el).animate({
height: "toggle",
opacity: "toggle"
}, 100).hide();
el.toggle();
});
});

I will be adding a third version later so I hope that I can add an additional function with an alternate letter or additional letter.

Happy coding!