jquery and javascript conflict

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");
}

I believe the collision is caused by your use of the $ shorthand in the content page. $ is used to represent jQuery. So, jQuery is trying to interpret $('slideshow').style.display , which is not valid jQuery.

Replace your shorthand with document.getElementById, or use jQuery selectors.

Standard JS

document.getElementById.style.display = 'none';

Or jQuery

$('slideshow').css('display', 'none');

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 ); 

it looks like your selections are missing "#" or "." depending on weather your trying to access an id or class

$('#slideshow').style.display = 'none';
$('#wrapper').style.display = 'block';

You are passing a string to the setTimeout parameter. Really bad.

$('slideshow').style.display = 'none';

You are trying to find <slideshow> tags with jQuery, maybe you are missing a class or ID selector?

Also, the style method is not a jQuery method asfar as I know, so maybe you will want to call it on a JavaScript object instead of a jQuery one? Or perhaps use the .css method on it?

Did u put ur plane javascript inside the :

$(document).ready(function() {
});

If yes then try to put them outside it.

Best practice would be to put all your Javascript/Jquery code in a .js file. Then import this .js in the page that need it.

This way your HTML will be clean and not cluttered with javascript all over the place.

I know i don't really answer your problem, but working this way you will probably help avoid it.

good luck