Hi,
Please refer below code.
HTML
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnDisplayPanel]').on('click', function () {
if ($(this).text() == 'Display Name') {
$(this).closest('tr').find('[id*=Panel1]').show();
$(this).text('Hide Name');
} else {
$(this).closest('tr').find('[id*=Panel1]').hide();
$(this).text('Display Name');
}
return false;
});
});
</script>
<asp:DataList ID="GetAll" runat="server">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"Id") %>' runat="server" />
</td>
<td>
<asp:Panel ID="Panel1" runat="server" Style="display: none">
<asp:Label ID="Label2" Text='<%#DataBinder.Eval(Container.DataItem,"Name") %>' runat="server" />
</asp:Panel>
</td>
<td>
<asp:LinkButton ID="btnDisplayPanel" runat="server">Display Name</asp:LinkButton>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Name") });
dt.Rows.Add(1, "John Hammond");
dt.Rows.Add(2, "Mudassar Khan");
dt.Rows.Add(3, "Suzanne Mathews");
dt.Rows.Add(4, "Robert Schidner");
GetAll.DataSource = dt;
GetAll.DataBind();
}
}
I hope this will help you out.