Jquery.min.js conflict

Question

My site has a problem when I use the following type function located in the header:

<script>
    $(document).ready(function() {
    $('#showVolunteer').click(function() {
        $('.vol_info').slideToggle("fast");
    });
});
</script>

I have to include the following line of code in order to get it to do what I want within the site:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.

I realize that wordpress includes a copy of jquery.js at the following location \\wp-includes\\js\\jquery\\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.

My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.

Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?

thanks

Answer 1

This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use " jQuery " in place of the " $ " symbol. Once this was done, everything worked as it should.

jQuery() NOT $() for Wordpress.