Table Structure:
Header Table : COLUMN_NAME DATA_TYPE IS_NULLABLE MAXIMUM_LENGTH
Id int No Null
Header nvarchar No 50
------------------------------------------------------------------------------------
Detail Table : DetailId int No Null
HeaderId int No Null
Detail nvarchar No 50
------------------------------------------------------------------------------------
Css :
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 800px;
float: left;
background: #EBE8D4;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
}
.accordionContent {
width: 800px;
float: left;
background: #C5D5FC;
display: none;
}
------------------------------------------------------------------------------------
Header Table : COLUMN_NAME DATA_TYPE IS_NULLABLE MAXIMUM_LENGTH
Id int No Null
Header nvarchar No 50
------------------------------------------------------------------------------------
Detail Table : DetailId int No Null
HeaderId int No Null
Detail nvarchar No 50
------------------------------------------------------------------------------------
Css :
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 800px;
float: left;
background: #EBE8D4;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
}
.accordionContent {
width: 800px;
float: left;
background: #C5D5FC;
display: none;
}
------------------------------------------------------------------------------------
Javascript :
$(document).ready(function() {
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
$("div.accordionContent").hide();
});
-----------------------------------------------------------------------------------
Default.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="AccordionInRepeter_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="JSAndCSS/format.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="JSAndCSS/javascript.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 100px">
</div>
<div align="center" style="font-family: Verdana; font-size: 12px">
<div id="basic-accordian" style="width: 600px" align="left">
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Panel ID="Header" runat="server" CssClass="accordionButton" Width="600px">
<span></span>
<asp:Image ID="Image1" runat="server" />
<asp:Label ID="lblHeader" runat="server" Text="Label" Font-Bold="True"></asp:Label>
</asp:Panel>
<asp:Panel ID="Content" runat="server" CssClass="accordionContent" Width="600px">
<asp:Label ID="lblDetails" runat="server" Text="Label"></asp:Label>
<asp:Panel ID="PanelSaveAndUpdate" runat="server" style="text-align:center" >
</asp:Panel>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
</div>
<div style="height: 20px">
</div>
</div>
</form>
</body>
</html>
-----------------------------------------------------------------------------
Default.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class AccordionInRepeter_Default : System.Web.UI.Page
{
string strQuery = "";
SqlConnection con;
SqlDataAdapter da;
DataTable DtHeader;
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=" + Server.MapPath("App_Data\\Database.mdf").ToString() + ";Integrated Security=True;User Instance=True");
if (con.State != ConnectionState.Open)
{
con.Open();
}
if (!IsPostBack)
{
populateRepeter();
}
}
private void populateRepeter()
{
strQuery = "Select id,Header from Header order by id asc";
da = new SqlDataAdapter(strQuery, con);
DtHeader = new DataTable();
da.Fill(DtHeader);
Repeater1.DataSource = DtHeader;
Repeater1.DataBind();
}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Label lblHeader = (Label)e.Item.FindControl("lblHeader");
Label lblDetails = (Label)e.Item.FindControl("lblDetails");
Image Image1 = (Image)e.Item.FindControl("Image1");
Panel PanelSaveAndUpdate = (Panel)e.Item.FindControl("PanelSaveAndUpdate");
if (lblHeader != null)
{
strQuery = "Select Detailid,Detail from Detail where HeaderId=" + DtHeader.Rows[e.Item.ItemIndex]["Id"].ToString() + "";
da = new SqlDataAdapter(strQuery, con);
DataTable dtDetail = new DataTable();
da.Fill(dtDetail);
string strDetail = "";
if (dtDetail.Rows.Count > 0)
{
Image1.ImageUrl = "Plus.ico";
lblHeader.Text = DtHeader.Rows[e.Item.ItemIndex]["Header"].ToString();
for (int i = 0; i < dtDetail.Rows.Count; i++)
{
strDetail += " <span> </span>" + dtDetail.Rows[i]["Detail"].ToString() + "</br>";
}
PanelSaveAndUpdate.Visible = true;
}
else
{
lblHeader.Text = " <span> </span>" + DtHeader.Rows[e.Item.ItemIndex]["Header"].ToString();
PanelSaveAndUpdate.Visible = false;
}
lblDetails.Text = strDetail;
}
}
}
}
-------------------------------------------------------------------------------
