Below is a code snippet of a simple aspx page containing my accordion. When this page is displayed in the browser the link is active only for the first row in the table. I believe the problem is a need to create unique href attributes for the h3 tag as each row is created in the table by the Dynamic Data framework.

 

Anyone seen this behavior and if so is a  unique href link the solution?

 

Thanks

 

 

 

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server">

 

<script type="text/javascript">

$(function() {

$("#accordion").accordion({

header: "h3",

collapsible: true,

active: false

});

        })

</script>

 

<asp:ListView ID="PlanCommentsList" DataSourceID="PlanCommentsListDataSource" runat="server">

<LayoutTemplate>

            <table id="TableList" class="listview">

<ItemTemplate>

<tr>

<td>

                        <div id="accordion">

<h3><a href=”#”>View Comment</a></h3>

<div><asp:DynamicControl

DataField="PlanComment"

Mode="ReadOnly"

runat="server" />

</div>

                                    </div>