Place a DetailsView inside the Repeater and OnItemDataBound Event Populate the DetailsView based on Title.
Reference:
http://aspsnippets.com/Articles/jQuery-Accordion-example-in-ASPNet-using-C-and-VBNet.aspx
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dvAccordian").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvAccordian" style="width: 400px">
<asp:Repeater ID="rptAccordian" runat="server" OnItemDataBound="rptAccordian_OnItemDataBound">
<ItemTemplate>
<h3>
<asp:Label ID="lblTitle" Text='<%# Eval("Title") %>' runat="server" /></h3>
<div>
<p>
<asp:DetailsView ID="DetailsView1" runat="server">
</asp:DetailsView>
</p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Namespace
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindRepeater();
}
}
protected void rptAccordian_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string title = (e.Item.FindControl("lblTitle") as Label).Text;
DetailsView dv = e.Item.FindControl("DetailsView1") as DetailsView;
//Write your code here to bind the DetailsView1
this.BindDetailsView(dv, title);
}
}
private void BindDetailsView(DetailsView dv, string title)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Content from AccordianContent WHERE Title = @Tilte";
cmd.Parameters.AddWithValue("@Tilte", title);
cmd.Connection = con;
con.Open();
dv.DataSource = cmd.ExecuteReader();
dv.DataBind();
con.Close();
}
}
}
private void BindRepeater()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Title, Content from AccordianContent";
cmd.Connection = con;
con.Open();
this.rptAccordian.DataSource = cmd.ExecuteReader();
this.rptAccordian.DataBind();
con.Close();
}
}
}
Screenshot
