JQuery on masterpage doesn't work in ASP.NET - asp.net

Question

i use this code in web forms and worked correctly but in master-page doesn't work
in head of master
<link rel="stylesheet" href="css/FirstPage.css" />
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script>
$(document).ready(function () {
$("div[id$='slide']").show('bounce');
$("div[id$='content']").accordion({ fillSpace: true, collapsible: true, active: false });
});
</script>
in body of master
enter code here
but it doesn't work, this code exactly work in web forms but not work in master page why?

Answer 1

Your code is not working because by default web forms page (be it regular page or master page) will add extra prefixes to the controls if they are placed inside other controls which are implementing INamingContainer interface.
If you are sure that you need runat="server" attribute on your divs then you can use inline code and use a ClientID property to get generated identificator:
$(document).ready(function () {
$("#<%=slide.ClientID%>").show('bounce');
$('#<%=content.ClientID%>').accordion({ fillSpace: true, collapsible: true, active: false });
});
Alternatively you can use ClientIDMode enumeration to control how client identificators are selected. In your case use ClientIDMode.Static:
<div runat="server" class="slide" id="slide" ClientIDMode="Static"></div>

Answer 2

I suspect this is because your control ids will be prepended by the ids of the content place holders.
Use the below CSS Selectors to access the controls that ends with id 'slide' and 'content'. Hope that helps..
$("div[id$='slide']")
$("div[id$='content']")