Karthik Venkatraman Karthik Venkatraman - 4 years ago 250
Javascript Question

jQuery Accordion not getting displayed

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.

Below is my LaunchPage.Master Code



<html>

<head runat="server">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<!-- Bootstrap 3.3.4 -->
<link href="content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="content/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="content/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script defer="defer" type="text/javascript" src="Content/js/jQuery/jQuery_1_7_2.min.js"></script>
</head>

<body class="skin-blue-light sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"> </span>
<!-- logo for regular state and mobile devices -->
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="Toggle Full Frame"></a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">
<asp:Label ID="lftSideLabel" runat="server" CssClass="info" />
</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="SettingsIcon" title="Settings" runat="server">
<i class="glyphicon glyphicon-cog" title="Settings"></i>
</a>
<ul class="dropdown-menu">
<li class="header">Settings</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li id="nUser" runat="server">
<a href="Register.aspx" id="RegisterOption">
<i class="fa fa-user-plus text-aqua"></i>Create New User
</a>
</li>
<li id="cPassword" runat="server">
<a href="changepassword.aspx" id="ChangePasswordOption">
<i class="fa fa-pencil text-red"></i>Change Password
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="LogoutPage.aspx" class="dropdown-toggle" title="Logout" ID="Signout">
<i class="glyphicon glyphicon-log-out" title="Logout"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
</div>
<!-- ./wrapper -->
</body>
<script defer="defer" type="text/javascript">
//Auto redirect to login page
function SessionExpireAlert(a) {
setTimeout(function() {
window.location = "Login.aspx"
}, a)
};
</script>
<script defer="defer" type="text/javascript">
$("[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")
}
})
});
</script>
<script defer="defer" type="text/javascript">
$(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") && ($("#content").find("[id^='tab']").hide(), $("#tabs li").attr("id", ""), $(this).parent().attr("id", "current"), $("#" + $(this).attr("name")).fadeIn())
})
});
</script>
<!-- jQuery 2.1.4 -->
<script defer="defer" src="Content/js/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script defer="defer" src="Content/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script defer="defer" src="Content/js/AdminApp/app.min.js" type="text/javascript"></script>

</html>





This is my FAQ.aspx Code



<%@ Page Title="" Language="C#" MasterPageFile="~/LaunchPage.master" AutoEventWireup="true" CodeFile="FAQ.aspx.cs" Inherits="FAQ" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#ContentPlaceHolder1_dvAccordian").accordion({
active: false,
collapsible: true,
heightStyle: "content",
alwaysOpen: false
});
});
</script>
<div>
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<section class="content-header">
</section>
<div id="dvAccordian" style="width: 99%" runat="server">
<asp:Repeater ID="rptFAQ" runat="server">
<ItemTemplate>
<div class="s_panel" style="font-family: 'Roboto'; font-size: small">
<h1>
<a href="#" class="lblFontSmall" data-content="Tool tip"><%# Eval("Question") %></a>
</h1>
<div>
<p>
<small><span class="lblFontSmall"><%# Eval("Answer") %></span></small>
</p>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>

<br />
<br />
</div>
</div>
</div>
</asp:Content>





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.

I tried to troubleshoot based on the response provided in these links, however nothing worked.

jQuery Accordion not working

jQuery accordion its not working

jQuery accordion() not working

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.

Answer Source

I found this code as a replacement for jquery accordion.

<!-- JS -->
<script type="text/javascript">
  $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });
</script>

<!-- CSS -->
<style>
  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}
</style>

<!-- HTML -->
<div id="accordion">
  <h4 class="accordion-toggle">Accordion 1</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 2</h4>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
  </div>
  <h4 class="accordion-toggle">Accordion 3</h4>
  <div class="accordion-content">
    <p>Vivamus facilisisnibh scelerisque laoreet.</p>
  </div>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download