title: jQuery Accordion not getting displayed
body: <p>I have a FAQ page that has a jQuery Accordion and a repeater control inside the accordion that will display various questions and answers. The FAQ page has a master page called LaunchPage.Master.</p>
  
  <p>Below is my LaunchPage.Master Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head runat="server"&gt;
    &lt;meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" /&gt;
    &lt;!-- Bootstrap 3.3.4 --&gt;
    &lt;link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="content/css/font-awesome.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;!-- Theme style --&gt;
    &lt;link href="content/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
    &lt;/asp:ContentPlaceHolder&gt;
    &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
    &lt;/asp:ContentPlaceHolder&gt;
    &lt;script defer="defer" type="text/javascript" src="Content/js/jQuery/jQuery_1_7_2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="skin-blue-light sidebar-mini"&gt;
    &lt;div class="wrapper"&gt;
      &lt;header class="main-header"&gt;
        &lt;!-- Logo --&gt;
        &lt;a href="#" class="logo"&gt;
          &lt;!-- mini logo for sidebar mini 50x50 pixels --&gt;
          &lt;span class="logo-mini"&gt; &lt;/span&gt;
          &lt;!-- logo for regular state and mobile devices --&gt;
        &lt;/a&gt;
        &lt;!-- Header Navbar: style can be found in header.less --&gt;
        &lt;nav class="navbar navbar-static-top" role="navigation"&gt;
          &lt;!-- Sidebar toggle button--&gt;
          &lt;a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="Toggle Full Frame"&gt;&lt;/a&gt;
          &lt;!-- Navbar Right Menu --&gt;
          &lt;div class="navbar-custom-menu"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="dropdown user user-menu"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                  &lt;span class="hidden-xs"&gt;
                                              &lt;asp:Label ID="lftSideLabel" runat="server" CssClass="info" /&gt;
                                          &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="dropdown notifications-menu"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" id="SettingsIcon" title="Settings" runat="server"&gt;
                  &lt;i class="glyphicon glyphicon-cog" title="Settings"&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li class="header"&gt;Settings&lt;/li&gt;
                  &lt;li&gt;
                    &lt;!-- inner menu: contains the actual data --&gt;
                    &lt;ul class="menu"&gt;
                      &lt;li id="nUser" runat="server"&gt;
                        &lt;a href="Register.aspx" id="RegisterOption"&gt;
                          &lt;i class="fa fa-user-plus text-aqua"&gt;&lt;/i&gt;Create New User
                        &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li id="cPassword" runat="server"&gt;
                        &lt;a href="changepassword.aspx" id="ChangePasswordOption"&gt;
                          &lt;i class="fa fa-pencil text-red"&gt;&lt;/i&gt;Change Password
                        &lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown user user-menu"&gt;
                    &lt;a href="LogoutPage.aspx" class="dropdown-toggle" title="Logout" ID="Signout"&gt;
                      &lt;i class="glyphicon glyphicon-log-out" title="Logout"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;!-- Left side column. contains the logo and sidebar --&gt;
      &lt;aside class="main-sidebar"&gt;
        &lt;!-- sidebar: style can be found in sidebar.less --&gt;
        &lt;section class="sidebar"&gt;
          &lt;!-- Sidebar user panel --&gt;
          &lt;!-- sidebar menu: : style can be found in sidebar.less --&gt;
          &lt;ul class="sidebar-menu"&gt;
          &lt;/ul&gt;
        &lt;/section&gt;
        &lt;!-- /.sidebar --&gt;
      &lt;/aside&gt;
      &lt;!-- Content Wrapper. Contains page content --&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;!-- Main content --&gt;
        &lt;section class="content"&gt;
          &lt;form id="form1" runat="server"&gt;
            &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
            &lt;/asp:ScriptManager&gt;
            &lt;div&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"&gt;
              &lt;/asp:ContentPlaceHolder&gt;
              &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
              &lt;/asp:ContentPlaceHolder&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/section&gt;
        &lt;!-- /.content --&gt;
      &lt;/div&gt;
      &lt;!-- /.content-wrapper --&gt;
      &lt;footer class="main-footer"&gt;
    &lt;/div&gt;
    &lt;!-- ./wrapper --&gt;
  &lt;/body&gt;
  &lt;script defer="defer" type="text/javascript"&gt;
    //Auto redirect to login page
    function SessionExpireAlert(a) {
      setTimeout(function() {
        window.location = "Login.aspx"
      }, a)
    };
  &lt;/script&gt;
  &lt;script defer="defer" type="text/javascript"&gt;
    $("[id*=Signout]").live("click", function() {
      $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Landing.aspx/LogoutIcon",
        data: "{}",
        dataType: "json",
        success: function(a) {},
        error: function(a) {
          alert("Error")
        }
      })
    });
  &lt;/script&gt;
  &lt;script defer="defer" type="text/javascript"&gt;
    $(document).ready(function() {
      $("#content").find("[id^='tab']").hide();
      $("#tabs li:first").attr("id", "current");
      $("#content #tab1").fadeIn();
      $("#tabs a").click(function(a) {
        a.preventDefault();
        "current" != $(this).closest("li").attr("id") &amp;&amp; ($("#content").find("[id^='tab']").hide(), $("#tabs li").attr("id", ""), $(this).parent().attr("id", "current"), $("#" + $(this).attr("name")).fadeIn())
      })
    });
  &lt;/script&gt;
  &lt;!-- jQuery 2.1.4 --&gt;
  &lt;script defer="defer" src="Content/js/jQuery/jQuery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap 3.3.2 JS --&gt;
  &lt;script defer="defer" src="Content/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- AdminLTE App --&gt;
  &lt;script defer="defer" src="Content/js/AdminApp/app.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my FAQ.aspx Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/LaunchPage.master" AutoEventWireup="true" CodeFile="FAQ.aspx.cs" Inherits="FAQ" %&gt;
  
    &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  
      &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"&gt;
      &lt;/asp:Content&gt;
      &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server"&gt;
      &lt;/asp:Content&gt;
      &lt;asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"&gt;
  
        &lt;link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"&gt;
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
        &lt;script&gt;
          $(document).ready(function() {
            $("#ContentPlaceHolder1_dvAccordian").accordion({
              active: false,
              collapsible: true,
              heightStyle: "content",
              alwaysOpen: false
            });
          });
        &lt;/script&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;div class="wrapper row-offcanvas row-offcanvas-left"&gt;
              &lt;section class="content-header"&gt;
              &lt;/section&gt;
              &lt;div id="dvAccordian" style="width: 99%" runat="server"&gt;
                &lt;asp:Repeater ID="rptFAQ" runat="server"&gt;
                  &lt;ItemTemplate&gt;
                    &lt;div class="s_panel" style="font-family: 'Roboto'; font-size: small"&gt;
                      &lt;h1&gt;
                                          &lt;a href="#" class="lblFontSmall" data-content="Tool tip"&gt;&lt;%# Eval("Question") %&gt;&lt;/a&gt;
                                      &lt;/h1&gt;
                      &lt;div&gt;
                        &lt;p&gt;
                          &lt;small&gt;&lt;span class="lblFontSmall"&gt;&lt;%# Eval("Answer") %&gt;&lt;/span&gt;&lt;/small&gt;
                        &lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/ItemTemplate&gt;
                &lt;/asp:Repeater&gt;
              &lt;/div&gt;
  
              &lt;br /&gt;
              &lt;br /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/asp:Content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I view the FAQ Page, I am not getting the accordions. Rather I am getting only the text. The jQueryUI.js and .CSS links are working fine. I tried to change my script and css link reference to my master page under the head as well as in my FAQ page too. However i am getting the same output as text instead of accordions.</p>
  
  <p>I tried to troubleshoot based on the response provided in these links, however nothing worked.</p>
  
  <p><a href="http://forums.asp.net/t/2029072.aspx?Jquery%20Accordion%20not%20working" rel="nofollow noreferrer">jQuery Accordion not working</a></p>
  
  <p><a href="https://stackoverflow.com/questions/23271541/jquery-accordion-its-not-working">jQuery accordion its not working</a></p>
  
  <p><a href="https://stackoverflow.com/questions/15776225/jquery-accordion-not-working">jQuery accordion() not working</a></p>
  
  <p>I am not able to find the root cause of the issue. When I inspect the code, the jQuery is not getting detected and loaded to the dvAccordion control. Any help is highly appreciated.</p>