Question

I am using jquery in the master page and javascript in the content page. When Jquery is used alone it works fine. But when I use the javascript(content page) along with jquery(master page) then jquery in master page stops working.

master page script

$(document).ready(function() {

// set up the accordion
$("#accordion>h3").click(function() {
    $(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});

// show active menu section
setTimeout('$("#accordion>div.activesec").slideToggle(800)', 100);

});

content page script

$('slideshow').style.display = 'none';
$('wrapper').style.display = 'block';
var slideshow = new TINY.slideshow("slideshow");
window.onload = function () {
    slideshow.auto = true;
    slideshow.speed = 5;
    slideshow.link = "linkhover";
    slideshow.info = "information";
    slideshow.thumbs = "slider";
    slideshow.left = "slideleft";
    slideshow.right = "slideright";
    slideshow.scrollSpeed = 4;
    slideshow.spacing = 5;
    slideshow.active = "#fff";
    slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
}

Answer 1

Ok, so it looks like the other script uses $, just like jQuery. You need to use $.noConflict() to prevent namespace clashes:

var $j = jQuery.noConflict();

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

// set up the accordion
$j("#accordion>h3").click(function() {
    $j(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});

// show active menu section
setTimeout('$j("#accordion>div.activesec").slideToggle(800)', 100);

If you don’t want to use $j instead of $ in all jQuery functions, you can wrap everything (except the content page scripts!) in a function that assigns $ to jQuery:

(function( $ ){
  // everything inside works normally with $
})( jQuery );