Multiple jQuery scripts on one page?

Question

I'm using a WordPress template that has a jQuery carousel on the homepage and some other jQuery goodies (toggles and sliders) on category pages, and they all work by themselves separately. I wanted to duplicate the slider on all category pages but when I add it, it breaks the jQuery on BOTH. Can someone give me a suggestion on how to get them to play nice with each other? Here's the 2 code snippets:

<script type="text/javascript">
// <![CDATA[
   /* featured listings slider */
   jQuery(document).ready(function($) {
      $('.slider').jCarouselLite({
         btnNext: '.next',
         btnPrev: '.prev',
         visible: 5,
         hoverPause: true,
         auto: 2800,
         speed: 1100,
         easing: 'easeOutQuint' // for different types of easing, see easing.js
      });
   });
// ]]>
</script>

and

<script type="text/javascript">
// <![CDATA[
// toggles the refine search field values
jQuery(document).ready(function($) {
    $('div.handle').click(function() {
        $(this).next('div.element').animate({
            height: ['toggle', 'swing'],
            opacity: 'toggle' }, 200
        );

        $(this).toggleClass('close', 'open');
        return false;
    });
    <?php foreach ( $_POST as $field => $val ) : ?>
    $('.<?php echo $field; ?> div.handle').toggleClass('close', 'open');
    $('.<?php echo $field; ?> div.element').show();
    <?php endforeach; ?>

});
// ]]>
</script>

...and

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#dist-slider').slider( {
            range: 'min',
            min: 0,
            max: 3000,
            value: <?php echo esc_js( isset( $_POST['distance'] ) ? intval( $_POST['distance'] ) : '50' ); ?>,
            step: 5,
            slide: function(event, ui) {
                $('#distance').val(ui.value + ' <?php echo $distance_unit; ?>');
            }
        });
        $('#distance').val($('#dist-slider').slider('value') + ' <?php echo $distance_unit; ?>');
    });
// ]]>
</script>

...and the last one

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#slider-range').slider( {
          range: true,
          min: <?php echo esc_js( intval( $cp_min_price ) ); ?>,
          max: <?php echo esc_js( intval( $cp_max_price ) ); ?>,
          step: 1,
          values: [ <?php echo esc_js( "{$amount[0]}, {$amount[1]}" ); ?> ],
          slide: function(event, ui) {
            <?php switch ( $cp_curr_symbol_pos ) {
                case 'left' :
                    ?>$('#amount').val('<?php echo $curr_symbol; ?>' + ui.values[0] + ' - <?php echo $curr_symbol; ?>' + ui.values[1]);<?php        
                    break;
                case 'left_space' : 
                ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + ui.values[0] + ' - <?php echo $curr_symbol; ?> ' + ui.values[1]);<?php
                    break;
                case 'right' :
                ?>$('#amount').val(ui.values[0] + '<?php echo $curr_symbol; ?> - ' + ui.values[1] + '<?php echo $curr_symbol; ?>' );<?php
                    break;
                case 'right_space' : 
                ?>$('#amount').val(ui.values[0] + ' <?php echo $curr_symbol; ?> - ' + ui.values[1] + ' <?php echo $curr_symbol; ?>' );<?php
                    break;
            } ?>
          }
        });
        <?php switch ( $cp_curr_symbol_pos ) {
            case 'left' :
                ?>$('#amount').val('<?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 1));<?php    
                break;
            case 'left_space' : 
            ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 1));<?php
                break;
            case 'right' :
            ?>$('#amount').val($('#slider-range').slider('values', 0) + '<?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + '<?php echo $curr_symbol; ?>');<?php
                break;
            case 'right_space' : 
            ?>$('#amount').val($('#slider-range').slider('values', 0) + ' <?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + ' <?php echo $curr_symbol; ?>');<?php
                break;
            } ?>

    });
// ]]>
</script>

The LAST THREE all work fine together but when I add the first one on the same page, they all break. I tried changing jQuery(document).ready(function($) { to $(document).ready(function() { and the second line $ to jQuery but that didn't fix anything. I also tried to change the '.slider' to '.somethingslider' because I see another instance of .slider below, but THAT didn't work. Any help is much appreciated!

Answer 1

Remove $ from all the function you are passing into ready method. However it will not make any difference because $ points to the main jQuery object itself.

Change this in all the ready handlers

jQuery(document).ready(function($) {

By

jQuery(document).ready(function() {

And make sure you have included jCarouselLite plugin js into your page, then it should work fine.

Answer 2

First off, you can just place the contents of all four jQuery(document).ready(function($) { together.. wont make a difference.

I would have to imagine there is a problem in the first script. what DOM elements do these correspond to? can you post more?

Answer 3

The theme was using an enqueue_script function to call jCarouselLite but it had an if statement wrapping it that caused it to be displayed only on the home page:

if ( get_option($app_abbr.'_enable_featured') == 'yes' && is_home() ) {

I simply removed the &&is_home() and that brought back the bottom 3 scripts' functionality. However, the carousel still wasn't working, so per @mblase75's suggestion above, I changed the class to an ID and voila, it worked! Here's my modified first code:

<script type="text/javascript">
// <![CDATA[
    /* featured listings slider */
    jQuery(document).ready(function($) {
        $('#myfirstslider').jCarouselLite({
            btnNext: '.next',
            btnPrev: '.prev',
            visible: 5,
            hoverPause: true,
            auto: 2800,
            speed: 1100,
            easing: 'easeOutQuint' // for different types of easing, see easing.js
        });
    });
// ]]>
</script>

The only other change I had to make was to my stylesheet to reflect the new ID vs. Class change above. The other 3 scripts were left alone. Thank you all for your help! I am ^'ing everybody but wanted to give a concise answer here.