You need to use Repeater control as Repeater does not render in any HTML .
See this article
<div id="dvAccordian" style = "width:400px">
<h3>
Section 1</h3>
<div>
<p>
This is content of Section 1
</p>
</div>
<h3>
Section 2</h3>
<div>
<p>
This is content of Section 2
</p>
</div>
<h3>
Section 3</h3>
<div>
<p>
This is content of Section 3
</p>
</div>
<h3>
Section 4</h3>
<div>
<p>
This is content of Section 4
</p>
</div>
</div>
So it will show you the output like this
Now when you use the same article with DataList things will not work this time as DataList renders in HTML so each item will be in a table.
Code with DataList
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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>
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div class="dvAccordian" style="width: 400px">
<h3>
<%# Eval("Title") %></h3>
<div>
<p>
<%# Eval("Content") %>
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
HTML Source
<table id="DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td>
<div class="dvAccordian" style="width: 400px">
<h3>
Section 1</h3>
<div>
<p>
This is content of Section 1
</p>
</div>
</div>
</td>
</tr><tr>
<td>
<div class="dvAccordian" style="width: 400px">
<h3>
Section 2</h3>
<div>
<p>
This is content of Section 2
</p>
</div>
</div>
</td>
</tr><tr>
<td>
<div class="dvAccordian" style="width: 400px">
<h3>
Section 3</h3>
<div>
<p>
This is content of Section 3
</p>
</div>
</div>
</td>
</tr><tr>
<td>
<div class="dvAccordian" style="width: 400px">
<h3>
Section 4</h3>
<div>
<p>
This is content of Section 4
</p>
</div>
</div>
</td>
</tr>
</table>
Screenshot will be
