without writing large codes.in this post i am
going to show that.to use this CollapsiblePanelExtender
you have to have ajaxcontroltoolkit installed.
this post will guide you-
http://www.asp.net/ajaxlibrary/act.ashx
the following codes shows how to do-
<asp:DataList ID="StudListDataList" DataKeyField="id"
runat="server" RepeatDirection="Horizontal" RepeatColumns="3">
<ItemTemplate>
<asp:Image id="StudImage" ImageUrl='<%# Eval("imageurl") %>'
Height="110" Width="110" runat="server" /><br />
<b><asp:Label CssClass="StudNameStyle" ID="StudName"
runat="server" Text='<%# Eval("studname") %>' /></b><br />
<asp:Label ID="BreedLabel" Text="Breed:" runat="server" />
<asp:Literal ID="BreedName" runat="server"
Text='<%# Eval("breedname") %>'/><br />
<asp:Label ID="StateLabel" Text="State:" runat="server" />
<asp:Literal ID="Literal1" runat="server"
Text='<%# Eval("state") %>'/><br />
<asp:Label ID="Label11" Text="Price:" runat="server" />
<asp:Literal ID="Literal10" runat="server"
Text='<%# Eval("price") %>'/><br />
<asp:LinkButton ID="textLabel" runat="server"
Text="Show Details" />
<asp:Panel ID="detailsPanel" CssClass="ModalWindow"
runat="server">
<asp:Label ID="Label4" CssClass="popuUpTextStyle"
Text="First Name:" runat="server" /><br />
<asp:Literal ID="Name" runat="server"
Text='<%# Eval("name") %>'/><br />
<asp:Label ID="Label6" CssClass="popuUpTextStyle"
Text="Address:" runat="server" /><br />
<asp:Literal ID="Literal2" runat="server"
Text='<%# Eval("address") %>'/><br />
<asp:Label ID="Label7" CssClass="popuUpTextStyle"
Text="City:" runat="server" /><br />
<asp:Literal ID="Literal3" runat="server"
Text='<%# Eval("city") %>'/><br />
<asp:Label ID="Label8" CssClass="popuUpTextStyle"
Text="Zip:" runat="server" /><br />
<asp:Literal ID="Literal4" runat="server"
Text='<%# Eval("zip") %>'/><br />
<asp:Label ID="Label9" CssClass="popuUpTextStyle"
Text="Phone:" runat="server" /><br />
<asp:Literal ID="Literal5" runat="server"
Text='<%# Eval("phone") %>'/><br />
<asp:Label ID="Label10" CssClass="popuUpTextStyle"
Text="Email:" runat="server" /><br />
<asp:Literal ID="Literal6" runat="server"
Text='<%# Eval("email") %>'/><br />
</asp:Panel>
<asp:CollapsiblePanelExtender ScrollContents="true"
ID="Collaps1" TargetControlID="detailsPanel"
CollapsedText="Show Details" ExpandControlID="textLabel"
CollapseControlID="textLabel"
SuppressPostBack="True" ExpandedText="Hide Details"
Collapsed="true" runat="server" ExpandedSize="70"
TextLabelID="textLabel">
by this above code when user clicks show Details
link of datalist item then the details will be
shown from the detailsPanel Panel.this Panel is set
as TargetControlID by the CollapsiblePanelExtender.