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


<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 ID="head" runat="server">
<script defer="defer" type="text/javascript" src="Content/js/jQuery/jQuery_1_7_2.min.js"></script>

<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 -->
<!-- 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" />
<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>
<ul class="dropdown-menu">
<li class="header">Settings</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
<li id="cPassword" runat="server">
<a href="changepassword.aspx" id="ChangePasswordOption">
<i class="fa fa-pencil text-red"></i>Change Password
<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>
<!-- 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">
<!-- /.sidebar -->
<!-- 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:ContentPlaceHolder ID="MainContent" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<!-- /.content -->
<!-- /.content-wrapper -->
<footer class="main-footer">
<!-- ./wrapper -->
<script defer="defer" type="text/javascript">
//Auto redirect to login page
function SessionExpireAlert(a) {
setTimeout(function() {
window.location = "Login.aspx"
}, a)
<script defer="defer" type="text/javascript">
$("[id*=Signout]").live("click", function() {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Landing.aspx/LogoutIcon",
data: "{}",
dataType: "json",
success: function(a) {},
error: function(a) {
<script defer="defer" type="text/javascript">
$(document).ready(function() {
$("#tabs li:first").attr("id", "current");
$("#content #tab1").fadeIn();
$("#tabs a").click(function(a) {
"current" != $(this).closest("li").attr("id") && ($("#content").find("[id^='tab']").hide(), $("#tabs li").attr("id", ""), $(this).parent().attr("id", "current"), $("#" + $(this).attr("name")).fadeIn())
<!-- 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>


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 ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<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>
$(document).ready(function() {
active: false,
collapsible: true,
heightStyle: "content",
alwaysOpen: false
<div class="wrapper row-offcanvas row-offcanvas-left">
<section class="content-header">
<div id="dvAccordian" style="width: 99%" runat="server">
<asp:Repeater ID="rptFAQ" runat="server">
<div class="s_panel" style="font-family: 'Roboto'; font-size: small">
<a href="#" class="lblFontSmall" data-content="Tool tip"><%# Eval("Question") %></a>
<small><span class="lblFontSmall"><%# Eval("Answer") %></span></small>

<br />
<br />

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($) {

      //Expand or collapse this panel

      //Hide the other panels


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

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